jQuery Selector Filters & Their Meanings

* $("*") All elements
.class $(".intro") All elements with class="intro"
element $("p") All

elements

     
:last $("p:last") The last

element

:odd $("tr:odd") All oddelements
:first-child $("p:first-child") All

elements that are the first child of their parent

:last-child $("p:last-child") All

elements that are the last child of their parent

:nth-child(n) $("p:nth-child(2)") All

elements that are the 2nd child of their parent

:nth-of-type(n) $("p:nth-of-type(2)") All

elements that are the 2nd

element of their parent

:only-child $("p:only-child") All

elements that are the only child of their parent

     
parent descendant $("div p") All

elements that are descendants of a

element
element ~ siblings $("div ~ p") All

elements that are siblings of a

element
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
     
:animated $(":animated") All animated elements
:contains(text) $(":contains('Hello')") All elements which contains the text "Hello"
:empty $(":empty") All elements that are empty
:hidden $("p:hidden") All hidden

elements

:root $(":root") The document's root element
     
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the word "hello"
:input $(":input") All input elements
:password $(":password") All input elements with type="password"
:checkbox $(":checkbox") All input elements with type="checkbox"
:reset $(":reset") All input elements with type="reset"
:image $(":image") All input elements with type="image"
:enabled $(":enabled") All enabled input elements
:selected $(":selected") All selected input elements

Here are some example selector combinations:

"blockquote i" // Matches within a

"ol > li" //li as a direct child of ol

"#output + *" // The sibling after the #output

"div.note > h1 + p" //

after

inside a div.note

Note that selector combinations are not limited to combinations of two selectors: three or more selectors are allowed, too.

Selector Grammar

The jQuery selector grammar is very similar to that of CSS3, and it is explained in detail in “jQuery Selectors” on page 89.
The following is a summary: 

Simple tag, class, and id selectors
* tagname .classname #id
Selector combinations
A B B as a descendant of A
A > B B as a child of A
A + B B as a sibling following A
A ~ B B as a sibling of A

Bibliographical Information

jQuery Pocket Reference

By: David Flanagan
Publisher: O'Reilly Media, Inc.
Pub. Date: December 28, 2010
Print ISBN-13: 978-1-4493-9722-7

These are notes I made after reading this book. See more book notes

Just to let you know, this page was last updated Tuesday, Mar 19 24