jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Essentially, the best parts from both of these query languages were taken, combined, and used to create the final jQuery expression language. If you already know CSS (which most web developers do) then you're going to be fine.
If you are unsure about the general differences between the techniques discussed here, these articles in the English Wikipedia may help clarify a lot: XPath and [
Using CSS and XPath Together
This is a point of confusion, for some: How can you use CSS and XPath together, they're so different! jQuery makes some allowances to make this happen, but we think that developers will really appreciate the advantages of each language. Here are some examples:
Hide all Paragraph elements that contain a class attribute:
$("p[@class]").hide();
Show the first paragraph on the page:
$("p:eq(0)").show();
Hide all divs that are currently showing:
$("div:visible").hide();
Get all list items that are children of an unordered list:
$("ul/li")
/* valid too: $("ul > li") */
Get all Paragraphs, with a class of 'foo', that have a link in them:
$("p.foo[a]");
Get list item that contains link with "Register" text inside:
$("li[a:contains('Register')]");
Get the input field's value with the name of 'bar':
$("input[@name=bar]").val();
All checked radio buttons:
$("input[@type=radio][@checked]")
If you still have questions concerning how this selector language works, please feel free to post to the mailing list.
CSS Selectors
jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of its expression.
For info on how CSS works feel free to read the various links:
What follows is a list of supported CSS Selector expressions.
- * 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
Supported, but different
All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an @ symbol).
- 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"
- E[@foo=bar][@baz=bop] an E element whose "foo" attribute value is exactly equal to "bar" and whose "baz" attribute is exactly equal to "bop"
Not supported
jQuery only supports selectors that actually select DOM elements - everything else is ignored.
- E:link
- E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
- E:active
- E:hover
- E:focus an E element during certain user actions
- E:target an E element being the target of the referring URI
- E::first-line the first formatted line of an E element
- E::first-letter the first formatted letter of an E element
- E::selection the portion of an E element that is currently selected/highlighted by the user
- E::before generated content before an E element
- E::after generated content after an E element
jQuery doesn't support the following selectors due to their lack of real-world usefulness:
- E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
- E:nth-of-type(n) an E element, the n-th sibling of its type
- E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
- E:first-of-type an E element, first sibling of its type
- E:last-of-type an E element, last sibling of its type
- E:only-of-type an E element, only sibling of its type
- E:lang(fr) an element of type E in language "fr"
- E[foo~="test"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "test"
- E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"
Context and Anchoring
In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function $(expr, context). You can anchor a CSS-like expression to the context root by starting it with one of the selectors >, +, or ~.
XPath Selectors
One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic XPath expressions, in addition to CSS 1-3. Here are some samples:
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)
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")
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]")
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
jQuery includes some expressions that aren't available in either CSS or XPath, but were found to be very handy, so were included.
The following expressions' syntax is based upon the various CSS selectors, of similar names.
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 <input type="file">.
Also available is :hidden, see the description above for details.
It is recommended to provide a context when using the above:
$('#myForm :input')
Or, if you have already a reference to your form:
$('input:radio', myForm)
This would select all input elements of type radio inside myForm. Using :radio is mostly the same as [@type=radio], but should be slightly faster. Good to know when working with large forms.
More Selectors
The jQuery selector system can be extended by third parties:
See Also