jQuery Pocket Reference

Queries and Query Results

When you pass a jQuery selector string to $(), it returns a jQuery object that represents the set of matched (or “selected”) elements. jQuery selectors are very much like the CSS selectors you use in stylesheets. For example:

div            // all <div> elements
#surname       // the element with id="surname"
.warning       // all elements with class="warning"

$() vs. querySelectorAll()

The $() function is similar to the Document method querySelectorAll(): both take a CSS selector as their argument and return an array-like object that holds the elements that match the selector. The jQuery implementation uses querySelectorAll() in browsers that support it, but there are good reasons to use $() instead of querySelectorAll() in your own code:

• querySelectorAll() has only recently been implemented by browser vendors, whereas $() works in older browsers as well as new ones.

• Because jQuery can perform selections “by hand”, the CSS3 selectors supported by $() work in all browsers, not just those browsers that support CSS3.

• The array-like object returned by $() (a jQuery object) is much more useful than the array-like object (a NodeList) returned by querySelectorAll().

The specific selector syntax supported by jQuery is detailed in jQuery Selectors. Rather than focus on those advanced selector details now, we’re going to first explore what you can do with the results of a query.

The value returned by $() is a jQuery object. jQuery objects are array-like: they have a length property and numeric ...