Chapter 8. Selectors and Selection Methods

We’ve been using the jQuery selection function, $(), with simple CSS selectors. It is now time to study the jQuery selector grammar in depth, along with a number of methods for refining and augmenting the set of selected elements.

jQuery Selectors

jQuery supports a fairly complete subset of the selector grammar defined by the CSS3 Selectors draft standard, with the addition of some nonstandard but very useful pseudoclasses.

The selector grammar has three layers. You’ve undoubtedly seen the simplest kind of selectors before. “#test” selects an element with an id attribute of “test”, “blockquote” selects all <blockquote> tags in the document, and “div.note” selects all <div> tags with a class attribute of “note”. Simple selectors can be combined into “selector combinations” such as “div.note>p” and “blockquote i” by separating them with a combinator character. And simple selectors and selector combinations can be grouped into comma-separated lists. These selector groups are the most general kind of selector that we pass to $(). Before explaining selector combinations and selector groups, we must explain the syntax of simple selectors.

Simple Selectors

A simple selector begins (explicitly or implicitly) with a tag type specification. If you are only interested in <p> tags, for example, your simple selector would begin with “p”. If you want to select elements without regard to their tagname, use the wildcard “*” instead. If a selector does not begin ...

Get jQuery Pocket Reference now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.