Selectors are the strings you pass to the jQuery function to select elements in the DOM. Example:
$(function () {
$("#album-list img").mouseover(function () {
$(this).animate({ height: '+=25', width: '+=25' })
.animate({ height: '-=25', width: '-=25' });
});
});
In this example, we used “#album-list img” as a selector to find image tags. If you think the string looks like something you might use in a cascading style sheet (CSS), you would be correct. The jQuery selector syntax derives from CSS 3.0 selectors, with some additions. Table 8-1 lists some of the selectors you’ll see in everyday jQuery code.
Here are some examples of Common Selectors:
| Example | Meaning |
|---|---|
| $(“#header”) | Find the element with an id of “header” |
| $(“.editor-label”) | Find all elements with a class name of “.editor-label” |
| $(“div”) | Find all elements |
| $(“#header div”) | Find all elements that are descendants of the element with an id of “header” |
| $(“#header > div”) | Find all elements that are children of the element with an id of “header” |
| $(“a:even”) | Find evenly numbered anchor tags |
The last line in the table demonstrates how jQuery supports the same pseudo-classes you might be familiar with from CSS. Using a pseudo-class allows you to select even or odd numbered elements, visited links, and more. For a full list of available CSS selectors, visit http://www.w3.org/TR/css3-selectors/.