jQuery selectors and examples

jQuery Selectors and Attribute Selectors

Selector	Example	Description
List accurate as of jQuery 1.3
*	$(‘*’);	This selector is a wild card method and will select all elements in a document.
#id	$(‘#id’);	This selector selects an element with the given ID.
.class	$(‘.class’)	The class selector will gather all elements in the document with the given class name
element	$(‘element’)	This selector will collect all elements in a document with the given tag name i.e. table, ul, li, a etc.
a, b, c. … n	$(‘th, td, .class, #id’)	This method can use multiple selection patterns to collect elements.
parent child	$(‘li a’)	This will select all “a” elements that are a descendant of “li”
a > b	$(‘table > tr’);	This will select all b elements which are a child element of a or in our example all tr elements in a table or tables.
a + b	$(‘li + a’);	This will select all “a” elements that are an immediate descendant of “li” in our example.
a ~ b	$(‘p ~ ul’);	This selector will select all “ul” elements that are a sibling of “p”
:first	$(‘ul li:first’);	Returns the first element in a result set
:first-child	$(‘ul li:first-child’);	Returns the first child element of the parent element.
:last	$(‘ul li:last’);	Returns the last element in a result set
:last-child	$(‘ul li:last-child’);	Returns the last child element of the parent element.
nly-child	$(‘div p:only-child’);	Returns elements which are the only child of the parent element.
:not(a)	$(‘input:not(:checked)’);	Returns all elements that are not “a” on in our example all input elements that are not checked
:has(a)	$(‘div:has(p)’);	Returns all elements with a descendant that matches a in out example a “div” that contains a “p”.
dd	$(‘ul li:odd’);	Returns all odd elements in a result set (zero based)
:even	$(‘ul li:even’);	Returns all even elements in a result set (zero based)
:eq(n)	$(‘ul li:eq(n)’);	Returns a numbered element identified by n (zero based)
:gt(n)	$(‘ul li:gt(n)’);	Returns all elements in a result set greater than n (zero based)
:lt(n)	$(‘ul li:lt(n)’);	Returns all elements in a result set less than n (zero based)
:nth-child(n)	$(‘ul li:nth-child(n)’);	Returns the nth child in a result set (one based)
:nth-child(odd)	$(‘ul li:nth-child(odd)’);	Returns all odd numbered elements in a result set (one based)
:nth-child(even)	$(‘ul li:nth-child(even)’);	Returns all even numbered elements in a result set (one based)
:nth-child(formula)	$(‘ul li:nth-child(3n)’);	Returns every nth child in a result set. In our example every third child (one based)
:header	$(‘:header’);	Returns all heading elements e.g. h1, h2, etc.
:animated	$(‘ul:animated’);	Returns elements with an animation currently in progress
:contains(text)	$(‘:contains(hello)’);	Returns all elements containing the passed string
:empty	$(‘:empty’);	Returns all elements that contain no child nodes
:parent	$(‘li:parent’);	Returns all elements that a parent nodes to any other DOM element including text nodes.
:hidden	$(‘ul:hidden’);	Returns all hidden elements that are hidden with CSS or input fields of the type “hidden”
:visible	$(‘ul:visible’);	Returns all visible elements
[attribute]	$(‘[href]‘);	Returns all elements that contain the passed attribute in our example any element with a “href” attribute
[attribute=value]	$(‘[rel=external]‘);	Returns all elements that the passed attribute value is equal to the passed value. In our example ant element with a “rel” attribute equal to “external”
[‘attribute!=value’]	$(‘[rel!=external]‘);	Returns all elements that the passed attribute value is not equal to the passed value. In our example ant element with a “rel” attribute that is not equal to “external”
[attribute!=value]	$(‘[class^=open]‘);	Returns all elements that the passed attribute value start with the passed value. In our example any element thats “class” attribute value begins with “open”
[attribute$=value]	$(‘[id$=-wrapper]‘);	Returns all elements that the passed attribute value ends with the passed value. In our example any element whos “id” ends with “-wrapper”
[attribute*=value]	$(‘[class*=offer]‘);	Returns all elements that the passed attribute value contains the passed value. In our example any element whos “class” contains the string “offer”
:input	$(‘:input’);	Returns only input elements of the tag name input, select, textarea and button
:text	$(‘:text’);	Returns only input elements of the type “text”
:password	$(‘:password’);	Returns only input elements of the type “password”
:radio	$(‘:radio’);	Returns only input elements of the type “radio”
:checkbox	$(‘:checkbox’);	Returns only input elements of the type “checkbox”
:submit	$(‘:submit’);	Returns only input elements of the type “submit”
:image	$(‘:image’);	Returns only input elements of the type “image”
:reset	$(‘:reset’);	Returns only input elements of the type “reset”
:file	$(‘:file’);	Returns only input elements of the type “file”
:button	$(‘:button’);	Returns only input elements of the type “button”
:enabled	$(‘:enabled’);	Returns all enabled input elements
:selected	$(‘:selected’);	Returns the selected element in a select list.
:disabled	$(‘:disabled’);	Returns disabled input elements
:checked	$(‘:checked’);	Returns checked input elements of the type radio or checkbox.

Forcing jquery ajax request to wait for response

The first A in AJAX stands for “Asynchonous”. The call is made, and the execution of the function continued without waiting for the call to return.

You could set the async option in your call to false, making your call sychronous. However, you would have to change your functions so the return false makes it through to the check function, and it is not recommended by the jQuery manual:

“The first letter in Ajax stands for “asynchronous,” meaning that the operation occurs in parallel and the order of completion is not guaranteed. The async option to $.ajax() defaults to true, indicating that code execution can continue after the request is made. Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.”

a better way around it would be to make the checks you can make in “real time” within the function, then start the Ajax request, and submit the form in the success callback of that request.

var name_success = true;

$.ajax({
    type: "POST",
    async: false,
    url: "username.asp",  // Needs to return "EXISTS" in this example 
    data: "username="+theform.username.value,
    success: function(msg){
        username = msg;
        if (username == "EXISTS") {  // Changed callback return value - 
                                     // safer this way
            alert("username already in use");
            name_success = false;   // should work because
                                    // we're in check()'s scope
            return false;
        }
    }
});

alert (name_success);

source: http://stackoverflow.com/questions/2903369/javascript-check-of-a-form-not-waiting-for-ajax-response

Simple CodeIgniter AJAX Example Using jQuery

In this article, I’ll show you how to easily incorporate AJAX into your CodeIgniter application using jQuery.

As with most development, there are multiple ways to accomplish the sale goal. This is just one practical way to get the job done.
Step 1: Download the latest version of jQuery

jQuery

Step 2: Create an /assets/js directory in the root of your application and add the jQuery file you just downloaded.

/assets/js/jquery.1.4.2.min.js

Step 3: Include the jQuery file in your applications header template file.

/apps/main/views/common/app_header.php

Tip: Define the path to your javascript directory in your parent controller.

/apps/main/controllers/MY_Controller.php

// Update template data with app info.
$this->tpl_data += array
(
…
‘js_path’ => base_url().’assets/js’,
…
);

Step 4: Create a controller that will display both the normal page and the AJAX widget.

/apps/main/controllers/ajaxexample.php

class Jqueryexample extends MY_Controller {

// ——————————————————————–

/**
* The constructor
*/
function __construct()
{
parent::__construct();
}

// ——————————————————————–

/**
* The default method for this controller
*/
function index()
{
$this->tpl_data += array(
“current_dts” => date(“Y-m-d: h:i:s”),
);

// Call the display template (/apps/main/views/jqueryexample.php)
$this->_tpl(‘jqueryexample’);
}

// ——————————————————————–

/**
* This method will be called using AJAX
*/
function postoutput()
{
// TIP #1 — Since this is a method that will be called via AJAX and the
// output will be inserted into a page that is already rendered, we need
// to use the $this->_widget which is define in the parent MY_Controller
// class.
//
// The _widget method simply does not include the header & footer but
// otherwise functions just like the _tpl method.
//
// TIP #2 — If the profile is enabled in a parent controller, then I
// recommend that you disable it for AJAX methods to prevent profiler
// data from being displayed in your widgets.

$this->output->enable_profiler(FALSE);

$this->tpl_data += array(
“current_dts” => date(“Y-m-d: h:i:s”),
);

// Call the display template (/apps/main/views/widgets/postoutput.php)
$this->_widget(‘widgets/postoutput’);
}

// ——————————————————————–

}

Step 5: Add any of the AJAX calls you plan to use to one of your templates.

See the jQuery documentation — http://api.jquery.com/category/ajax/

jQuery AJAX Example – Pulling in data from an controller using AJAX.

The current datetime is .

Click Me