Aug 11, 2007

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

$("//div//p")

$("//div/p")

$("//div ~ form")

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

[edit]

Supported Predicates

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

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

$("//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 .