The most basic concept of jQuery is to “select some elements and do something with them.” jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit http://api.jquery.com/category/selectors/.
Following are a few examples of common selection techniques.
Example 3.5. Selecting elements by class name
$('div.myClass'); // performance improves if you specify element type
Example 3.6. Selecting elements by attribute
$('input[name=first_name]'); // beware, this can be very slow
Example 3.8. Pseudo-selectors
$('a.external:first');
$('tr:odd');
$('#myForm :input'); // select all input-like elements in a form
$('div:visible');
$('div:gt(2)'); // all except the first three divs
$('div:animated'); // all currently animated divs
When you use the :visible and :hidden
pseudo-selectors, jQuery tests the actual visibility of the element, not
its CSS visibility or display — that is, it looks to see if the
element's physical height and width on the page are
both greater than zero. However, this test doesn't work with
<tr> elements; in this case, jQuery does check the
CSS display property, and considers an element hidden if
its display property is set to none. Elements
that have not been added to the DOM will always be considered hidden,
even if the CSS that would affect them would render them visible. (See
the Manipulation section later in this chapter to learn how to create
and add elements to the DOM.)
For reference, here is the code jQuery uses to determine whether an element is visible or hidden, with comments added for clarity:
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// does the element have 0 height, 0 width,
// and it's not a <tr>?
return width === 0 && height === 0 && !skip ?
// then it must be hidden
true :
// but if it has width and height
// and it's not a <tr>
width > 0 && height > 0 && !skip ?
// then it must be visible
false :
// if we get here, the element has width
// and height, but it's also a <tr>,
// so check its display property to
// decide whether it's hidden
jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
Once you've made a selection, you'll often want to know whether you have anything to work with. You may be inclined to try something like:
if ($('div.foo')) { ... }
This won't work. When you make a selection using $(),
an object is always returned, and objects always evaluate to
true. Even if your selection doesn't contain any elements,
the code inside the if statement will still run.
Instead, you need to test the selection's length property, which tells you how many elements were selected. If the answer is 0, the length property will evaluate to false when used as a boolean value.
Every time you make a selection, a lot of code runs, and jQuery doesn't do caching of selections for you. If you've made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.
In Example 3.10, “Storing selections in a variable”, the variable name begins with a dollar sign. Unlike in other languages, there's nothing special about the dollar sign in JavaScript -- it's just another character. We use it here to indicate that the variable contains a jQuery object. This practice -- a sort of Hungarian notation -- is merely convention, and is not mandatory.
Once you've stored your selection, you can call jQuery methods on the variable you stored it in just like you would have called them on the original selection.
A selection only fetches the elements that are on the page when you make the selection. If you add elements to the page later, you'll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don't magically update when the DOM changes.
Sometimes you have a selection that contains more than what you're after; in this case, you may want to refine your selection. jQuery offers several methods for zeroing in on exactly what you're after.
Example 3.11. Refining selections
$('div.foo').has('p'); // div.foo elements that contain <p>'s
$('h1').not('.bar'); // h1 elements that don't have a class of bar
$('ul li').filter('.current'); // unordered list items with class of current
$('ul li').first(); // just the first unordered list item
$('ul li').eq(5); // the sixth
jQuery offers several pseudo-selectors that help you find elements in your forms; these are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors.
Selects <button> elements and elements
with type="button"
Selects inputs with type="checkbox"
Selects checked inputs
Selects disabled form elements
Selects enabled form elements
Selects inputs with type="file"
Selects inputs with type="image"
Selects <input>,
<textarea>, and <select>
elements
Selects inputs with type="password"
Selects inputs with type="radio"
Selects inputs with type="reset"
Selects options that are selected
Selects inputs with type="submit"
Selects inputs with type="text"
Example 3.12. Using form-related pseduo-selectors
$("#myForm :input'); // get all elements that accept input
Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.