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 link:
$("p[a]").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 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.
[edit]CSS Selectors
jquery has full CSS 1-3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression.
For info on how CSS works feel free to read the various links:
CSS 1
CSS 2
CSS 3
What follows is a list of supported CSS Selector expressions.
* any element
E an element of type E
E:root an E element, root of the document
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
E:disabled a user interface element E which is enabled or disabled
E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
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
[edit]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"
[edit]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"
[edit]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:
[edit]Location Paths
Absolute Paths
$("/html/body//p")
$("/*/body//p")
$("//p/../div")
Relative Paths
$("a",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
[@*] Has an attribute
$("//div[@*]")
[@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)")
[edit]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.
[edit]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(4) Selects all matched elements whose index is greater than N.
:lt(4) 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')").hide();
[edit]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").
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 by slightly faster. Good to know when working with large forms.
[edit]More Selectors
The jquery selector system can be extended by third parties:
More Selectors Plugin
Mike Alsup on Custom Selectors
Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)
Retrieved from "http://www.docs.jquery.com/DOM/Traversing/Selectors"
