jQuery Selector

CSS Selectors

• * any element
• E an element of type E
• E:nth-child(n) an E element, the n-th child of its parent
• E:first-child an E element, first child of its parent
• E:last-child an E element, last child of its parent
• E:only-child an E element, only child of its parent
• E:empty an E element that has no children (including text nodes)
• E:enabled a user interface element E which is not disabled
• E:disabled a user interface element E which is disabled
• E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
• E:selected a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery
• E.warning an E element whose class is "warning"
• E#myid an E element with ID equal to "myid". (Will only match, at most, one element.)
• E:not(s) an E element that does not match simple selector s
• E F an F element descendant of an E element
• E > F an F element child of an E element
• E + F an F element immediately preceded by an E element
• E ~ F an F element preceded by an E element
• E,F,G select all E elements, F elements, and G elements
• E[@foo] an E element with a "foo" attribute
• E[@foo=bar] an E element whose "foo" attribute value is exactly equal to "bar"
• E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar"
• E[@foo$=bar] an E element whose "foo" attribute value ends exactly with the string "bar"
• E[@foo*=bar] an E element whose "foo" attribute value contains the substring "bar"

XPath Selectors

Location Paths

• Relative to the entire HTML document

$("/html/body//p")

$("body//p")

$("p/../div")

• Relative to the context node this

$("p/*", this)

$("/p//a", this)

[edit]

Supported Axis Selectors

• Descendant Element has a descendant element

$("//div//p")

• Child Element has a child element

$("//div/p")

• Preceding Sibling Element has an element before it, on the same axes

$("//div ~ form")

• Parent Selects the parent element of the element

$("//div/../p")

[edit]

Supported Predicates

• [@foo] Has an attribute of foo

$("//input[@checked]")

• [@foo='test'] Attribute foo is equal to test

$("//a[@ref='nofollow']")

• [Nodelist] Element contains a node list, for example:

$("//div[p]")

$("//div[p/a]")

[edit]

Supported Predicates, but differently

• [last()] or [position()=last()] becomes :last

$("p:last")

• [0] or [position()=0] becomes :eq(0) or :first

$("p:first")

$("p:eq(0)")

• [position() < 5] becomes :lt(5)

$("p:lt(5)")

• [position() > 2] becomes :gt(2)

$("p:gt(2)")

Custom Selectors

• :even Selects every other (even) element from the matched element set.
• :odd Selects every other (odd) element from the matched element set.
• :eq(0) and :nth(0) Selects the Nth element from the matched element set
• :gt(N) Selects all matched elements whose index is greater than N.
• :lt(N) Selects all matched elements whose index is less than N.
• :first Equivalent to :eq(0)
• :last Selects the last matched element.
• :parent Selects all elements which have child elements (including text).
• :contains('test') Selects all elements which contain the specified text.
• :visible Selects all visible elements (this includes items that have a display of block or inline, a visibility of visible, and aren't form elements of type hidden)
• :hidden Selects all hidden elements (this includes items that have a display of none, or a visibility of hidden, or are form elements of type hidden)

Some examples:

$("p:first").css("fontWeight","bold");

$("div:hidden").show();

$("/div:contains('test')", this).hide();

Form Selectors

There are a few selectors for form elements:

• :input Selects all form elements (input, select, textarea, button).
• :text Selects all text fields (type="text").
• :password Selects all password fields (type="password").
• :radio Selects all radio fields (type="radio").
• :checkbox Selects all checkbox fields (type="checkbox").
• :submit Selects all submit buttons (type="submit").
• :image Selects all form images (type="image").
• :reset Selects all reset buttons (type="reset").
• :button Selects all other buttons (type="button").
• :file Selects all .