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
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 fifth
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.