jQuery Using CSS and XPath Together

<p>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:</p><div style="float: right"><iframe marginwidth="0" marginheight="0" src="http://www.amazon.cn/union/asso_product.asp?prodid=bkbk832353&source=samool&lt1=%5Fblank&price=all&img=imgsm&border=y&bg1=ffffff&fc1=000000&lc1=0000ff" frameborder="0" width="120" scrolling="no" height="240"></iframe></div><p>Hide all Paragraph elements that contain a class attribute:<br />隐藏样式表中有名为“class“所有段落</p><pre> $("p[class]").hide();</pre><p>Show the first paragraph on the page:<br />显示文章中第一个段落</p><pre> $("p:eq(0)").show();</pre><p>Hide all divs that are currently showing:<br />隐藏所有可见的层</p><pre> $("div:visible").hide();</pre><p>Get all list items that are children of an unordered list:<br />获得所有ul 中的li</p><pre> $("ul/li") /* valid too: $("ul > li") */</pre><p>Get all Paragraphs, with a class of 'foo', that have a link in them:<br />获取段落，条件为样式表为foo的超连接</p><pre> $("p.foo[a]");</pre><p>Get list item that contains link with "Register" text inside:<br />获取列表，条件：文字为Register的超连接</p><pre> $("li[a:contains('Register')]");</pre><p>Get the input field's value with the name of 'bar':<br />获取输入框的文字，输入框的名字为bar</p><pre> $("input[@name=bar]").val();</pre><p>All checked radio buttons:<br />获得所有已经选中复选框</p><pre> $("input[@type=radio][@checked]")</pre><p>If you still have questions concerning how this selector language works, please feel free to post to the <a class="external text" title="http://jquery.com/discuss/" href="http://jquery.com/discuss/">mailing list</a>.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: CSS Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=3">edit</a>]</div><p><a name="CSS_Selectors"></a></p><h2>CSS Selectors</h2><p>jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression.</p><p>For info on how CSS works feel free to read the various links:</p><ul lastcheckbox="null"><li><a class="external text" title="http://www.w3.org/TR/REC-CSS1#basic-concepts" href="http://www.w3.org/TR/REC-CSS1#basic-concepts">CSS 1</a></li><li><a class="external text" title="http://www.w3.org/TR/REC-CSS2/selector.html" href="http://www.w3.org/TR/REC-CSS2/selector.html">CSS 2</a></li><li><a class="external text" title="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/">CSS 3</a></li></ul><p>What follows is a list of supported CSS Selector expressions.</p><ul lastcheckbox="null"><li><b>*</b> any element</li><li><b>E</b> an element of type E</li><li><b>E:nth-child(n)</b> an E element, the n-th child of its parent</li><li><b>E:first-child</b> an E element, first child of its parent</li><li><b>E:last-child</b> an E element, last child of its parent</li><li><b>E:only-child</b> an E element, only child of its parent</li><li><b>E:empty</b> an E element that has no children (including text nodes)</li><li><b>E:enabled</b> a user interface element E which is not disabled</li><li><b>E:disabled</b> a user interface element E which is disabled</li><li><b>E:checked</b> a user interface element E which is checked (for instance a radio-button or checkbox)</li><li><b>E:selected</b> 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</li><li><b>E.warning</b> an E element whose class is "warning"</li><li><b>E#myid</b> an E element with ID equal to "myid". (Will only match, at most, one element.)</li><li><b>E:not(s)</b> an E element that does not match simple selector s</li><li><b>E F</b> an F element descendant of an E element</li><li><b>E > F</b> an F element child of an E element</li><li><b>E + F</b> an F element immediately preceded by an E element</li><li><b>E ~ F</b> an F element preceded by an E element</li><li><b>E,F,G</b> select all E elements, F elements, and G elements</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported, but different" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=4">edit</a>]</div><p><a name="Supported.2C_but_different"></a></p><h3>Supported, but different</h3><p>All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an <b>@</b> symbol).</p><ul lastcheckbox="null"><li><b>E[@foo]</b> an E element with a "foo" attribute</li><li><b>E[@foo=bar]</b> an E element whose "foo" attribute value is exactly equal to "bar"</li><li><b>E[@foo^=bar]</b> an E element whose "foo" attribute value begins exactly with the string "bar"</li><li><b>E[@foo$=bar]</b> an E element whose "foo" attribute value ends exactly with the string "bar"</li><li><b>E[@foo*=bar]</b> an E element whose "foo" attribute value contains the substring "bar"</li><li><b>E[@foo=bar][@baz=bop]</b> an E element whose "foo" attribute value is exactly equal to "bar" and whose "baz" attribute is exactly equal to "bop"</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Not supported" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=5">edit</a>]</div><p><a name="Not_supported"></a></p><h3>Not supported</h3><p>jQuery only supports selectors that actually select DOM elements - everything else is ignored.</p><ul lastcheckbox="null"><li><b>E:link</b></li><li><b>E:visited</b> an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)</li><li><b>E:active</b></li><li><b>E:hover</b></li><li><b>E:focus</b> an E element during certain user actions</li><li><b>E:target</b> an E element being the target of the referring URI</li><li><b>E::first-line</b> the first formatted line of an E element</li><li><b>E::first-letter</b> the first formatted letter of an E element</li><li><b>E::selection</b> the portion of an E element that is currently selected/highlighted by the user</li><li><b>E::before</b> generated content before an E element</li><li><b>E::after</b> generated content after an E element</li></ul><p>jQuery doesn't support the following selectors due to their lack of real-world usefulness:</p><ul lastcheckbox="null"><li><b>E:nth-last-child(n)</b> an E element, the n-th child of its parent, counting from the last one</li><li><b>E:nth-of-type(n)</b> an E element, the n-th sibling of its type</li><li><b>E:nth-last-of-type(n)</b> an E element, the n-th sibling of its type, counting from the last one</li><li><b>E:first-of-type</b> an E element, first sibling of its type</li><li><b>E:last-of-type</b> an E element, last sibling of its type</li><li><b>E:only-of-type</b> an E element, only sibling of its type</li><li><b>E:lang(fr)</b> an element of type E in language "fr"</li><li><b>E[foo~="test"]</b> an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "test"</li><li><b>E[hreflang|="en"]</b> an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Context and Anchoring" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=6">edit</a>]</div><p><a name="Context_and_Anchoring"></a></p><h3>Context and Anchoring</h3><p>In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function <code>$(expr, context)</code>. You can anchor a CSS-like expression to the context root by starting it with one of the selectors <code>></code>, <code>+</code>, or <code>~</code>.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: XPath Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=7">edit</a>]</div><p><a name="XPath_Selectors"></a></p><h2>XPath Selectors</h2><p>One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic <a class="external text" title="http://www.w3.org/TR/xpath" href="http://www.w3.org/TR/xpath">XPath expressions</a>, in addition to CSS 1-3. Here are some samples:</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Location Paths" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=8">edit</a>]</div><p><a name="Location_Paths"></a></p><h3>Location Paths</h3><ul><li>Relative to the entire HTML document</li></ul><pre> $("/html/body//p") $("body//p") $("p/../div")</pre><ul><li>Relative to the context node <code>this</code></li></ul><pre> $("p/*", this) $("/p//a", this)</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Axis Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=9">edit</a>]</div><p><a name="Supported_Axis_Selectors"></a></p><h3>Supported Axis Selectors</h3><ul><li><b>Descendant</b> Element has a descendant element</li></ul><pre> $("//div//p")</pre><ul><li><b>Child</b> Element has a child element</li></ul><pre> $("//div/p")</pre><ul><li><b>Preceding Sibling</b> Element has an element before it, on the same axes</li></ul><pre> $("//div ~ form")</pre><ul><li><b>Parent</b> Selects the parent element of the element</li></ul><pre> $("//div/../p")</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Predicates" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=10">edit</a>]</div><p><a name="Supported_Predicates"></a></p><h3>Supported Predicates</h3><ul><li><b>[@foo]</b> Has an attribute of foo</li></ul><pre> $("//input[@checked]")</pre><ul><li><b>[@foo='test']</b> Attribute foo is equal to test</li></ul><pre> $("//a[@ref='nofollow']")</pre><ul><li><b>[Nodelist]</b> Element contains a node list, for example:</li></ul><pre> $("//div[p]") $("//div[p/a]")</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Predicates, but differently" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=11">edit</a>]</div><p><a name="Supported_Predicates.2C_but_differently"></a></p><h3>Supported Predicates, but differently</h3><ul><li><b>[last()] or [position()=last()]</b> becomes <b>:last</b></li></ul><pre> $("p:last")</pre><ul><li><b>[0] or [position()=0]</b> becomes <b>:eq(0) or :first</b></li></ul><pre> $("p:first") $("p:eq(0)")</pre><ul><li><b>[position() < 5]</b> becomes <b>:lt(5)</b></li></ul><pre> $("p:lt(5)")</pre><ul><li><b>[position() > 2]</b> becomes <b>:gt(2)</b></li></ul><pre> $("p:gt(2)")</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=12">edit</a>]</div><p><a name="Custom_Selectors"></a></p><h2>Custom Selectors</h2><p>jQuery includes some expressions that aren't available in either CSS or XPath, but were found to be very handy, so were included.</p><p>The following expressions' syntax is based upon the various CSS selectors, of similar names.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=13">edit</a>]</div><p><a name="Custom_Selectors_2"></a></p><h3>Custom Selectors</h3><ul lastcheckbox="null"><li><b>:even</b> Selects every other (even) element from the matched element set.</li><li><b>:odd</b> Selects every other (odd) element from the matched element set.</li><li><b>:eq(0) and :nth(0)</b> Selects the Nth element from the matched element set</li><li><b>:gt(N)</b> Selects all matched elements whose index is greater than N.</li><li><b>:lt(N)</b> Selects all matched elements whose index is less than N.</li><li><b>:first</b> Equivalent to <b>:eq(0)</b></li><li><b>:last</b> Selects the last matched element.</li><li><b>:parent</b> Selects all elements which have child elements (including text).</li><li><b>:contains('test')</b> Selects all elements which contain the specified text.</li><li><b>:visible</b> 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)</li><li><b>:hidden</b> 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)</li></ul><p>Some examples:</p><pre> $("p:first").css("fontWeight","bold"); $("div:hidden").show(); $("/div:contains('test')", this).hide();</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Form Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=14">edit</a>]</div><p><a name="Form_Selectors"></a></p><h3>Form Selectors</h3><p>There are a few selectors for form elements:</p><ul lastcheckbox="null"><li><b>:input</b> Selects all form elements (input, select, textarea, button).</li><li><b>:text</b> Selects all text fields (type="text").</li><li><b>:password</b> Selects all password fields (type="password").</li><li><b>:radio</b> Selects all radio fields (type="radio").</li><li><b>:checkbox</b> Selects all checkbox fields (type="checkbox").</li><li><b>:submit</b> Selects all submit buttons (type="submit").</li><li><b>:image</b> Selects all form images (type="image").</li><li><b>:reset</b> Selects all reset buttons (type="reset").</li><li><b>:button</b> Selects all other buttons (type="button").</li><li><b>:file</b> Selects all <input type="file">.</li></ul><p>Also available is <b>:hidden</b>, see the description above for details.</p><p>It is recommended to provide a context when using the above:</p><pre> $('#myForm :input')</pre><p>Or, if you have already a reference to your form:</p><pre> $('input:radio', myForm)</pre><p>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.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: More Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=15">edit</a>]</div><p><a name="More_Selectors"></a></p><h3>More Selectors</h3><p>The jQuery selector system can be extended by third parties:</p><ul lastcheckbox="null"><li><a class="external text" title="http://www.softwareunity.com/sandbox/JQueryMoreSelectors/" href="http://www.softwareunity.com/sandbox/JQueryMoreSelectors/">More Selectors Plugin</a></li><li><a class="external text" title="http://www.malsup.com/jquery/expr/" href="http://www.malsup.com/jquery/expr/">Mike Alsup on Custom Selectors</a></li><li><a class="external text" title="http://jquery.com/dev/bugs/bug/312/" href="http://jquery.com/dev/bugs/bug/312/">Patch</a> to allow selection by CSS property (full plugin to be released simultaneously with 1.1)</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: See Also" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=16">edit</a>]</div><p><a name="See_Also"></a></p><h3>See Also</h3><ul><li><a class="external text" title="http://www.woods.iki.fi/interactive-jquery-tester.html" href="http://www.woods.iki.fi/interactive-jquery-tester.html">Interactive jQuery selector tester</a></li></ul><div class="printfooter">Retrieved from "<a href="http://docs.jquery.com/API/1.1.2/DOM/Traversing/Selectors">http://docs.jquery.com/API/1.1.2/DOM/Traversing/Selectors</a>"</div>

<p>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:</p><div style="float: right"><iframe marginwidth="0" marginheight="0" src="http://www.amazon.cn/union/asso_product.asp?prodid=bkbk832353&amp;source=samool&amp;lt1=%5Fblank&amp;price=all&amp;img=imgsm&amp;border=y&amp;bg1=ffffff&amp;fc1=000000&amp;lc1=0000ff" frameborder="0" width="120" scrolling="no" height="240"></iframe></div><p>Hide all Paragraph elements that contain a class attribute:<br />隐藏样式表中有名为“class“所有段落</p><pre> $(&quot;p[class]&quot;).hide();</pre><p>Show the first paragraph on the page:<br />显示文章中第一个段落</p><pre> $(&quot;p:eq(0)&quot;).show();</pre><p>Hide all divs that are currently showing:<br />隐藏所有可见的层</p><pre> $(&quot;div:visible&quot;).hide();</pre><p>Get all list items that are children of an unordered list:<br />获得所有ul 中的li</p><pre> $(&quot;ul/li&quot;) /* valid too: $(&quot;ul &gt; li&quot;) */</pre><p>Get all Paragraphs, with a class of 'foo', that have a link in them:<br />获取段落，条件为样式表为foo的超连接</p><pre> $(&quot;p.foo[a]&quot;);</pre><p>Get list item that contains link with &quot;Register&quot; text inside:<br />获取列表，条件：文字为Register的超连接</p><pre> $(&quot;li[a:contains('Register')]&quot;);</pre><p>Get the input field's value with the name of 'bar':<br />获取输入框的文字，输入框的名字为bar</p><pre> $(&quot;input[@name=bar]&quot;).val();</pre><p>All checked radio buttons:<br />获得所有已经选中复选框</p><pre> $(&quot;input[@type=radio][@checked]&quot;)</pre><p>If you still have questions concerning how this selector language works, please feel free to post to the <a class="external text" title="http://jquery.com/discuss/" href="http://jquery.com/discuss/">mailing list</a>.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: CSS Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=3">edit</a>]</div><p><a name="CSS_Selectors"></a></p><h2>CSS Selectors</h2><p>jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression.</p><p>For info on how CSS works feel free to read the various links:</p><ul lastcheckbox="null"><li><a class="external text" title="http://www.w3.org/TR/REC-CSS1#basic-concepts" href="http://www.w3.org/TR/REC-CSS1#basic-concepts">CSS 1</a></li><li><a class="external text" title="http://www.w3.org/TR/REC-CSS2/selector.html" href="http://www.w3.org/TR/REC-CSS2/selector.html">CSS 2</a></li><li><a class="external text" title="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/">CSS 3</a></li></ul><p>What follows is a list of supported CSS Selector expressions.</p><ul lastcheckbox="null"><li><b>*</b> any element</li><li><b>E</b> an element of type E</li><li><b>E:nth-child(n)</b> an E element, the n-th child of its parent</li><li><b>E:first-child</b> an E element, first child of its parent</li><li><b>E:last-child</b> an E element, last child of its parent</li><li><b>E:only-child</b> an E element, only child of its parent</li><li><b>E:empty</b> an E element that has no children (including text nodes)</li><li><b>E:enabled</b> a user interface element E which is not disabled</li><li><b>E:disabled</b> a user interface element E which is disabled</li><li><b>E:checked</b> a user interface element E which is checked (for instance a radio-button or checkbox)</li><li><b>E:selected</b> 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</li><li><b>E.warning</b> an E element whose class is &quot;warning&quot;</li><li><b>E#myid</b> an E element with ID equal to &quot;myid&quot;. (Will only match, at most, one element.)</li><li><b>E:not(s)</b> an E element that does not match simple selector s</li><li><b>E F</b> an F element descendant of an E element</li><li><b>E &gt; F</b> an F element child of an E element</li><li><b>E + F</b> an F element immediately preceded by an E element</li><li><b>E ~ F</b> an F element preceded by an E element</li><li><b>E,F,G</b> select all E elements, F elements, and G elements</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported, but different" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=4">edit</a>]</div><p><a name="Supported.2C_but_different"></a></p><h3>Supported, but different</h3><p>All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an <b>@</b> symbol).</p><ul lastcheckbox="null"><li><b>E[@foo]</b> an E element with a &quot;foo&quot; attribute</li><li><b>E[@foo=bar]</b> an E element whose &quot;foo&quot; attribute value is exactly equal to &quot;bar&quot;</li><li><b>E[@foo^=bar]</b> an E element whose &quot;foo&quot; attribute value begins exactly with the string &quot;bar&quot;</li><li><b>E[@foo$=bar]</b> an E element whose &quot;foo&quot; attribute value ends exactly with the string &quot;bar&quot;</li><li><b>E[@foo*=bar]</b> an E element whose &quot;foo&quot; attribute value contains the substring &quot;bar&quot;</li><li><b>E[@foo=bar][@baz=bop]</b> an E element whose &quot;foo&quot; attribute value is exactly equal to &quot;bar&quot; and whose &quot;baz&quot; attribute is exactly equal to &quot;bop&quot;</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Not supported" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=5">edit</a>]</div><p><a name="Not_supported"></a></p><h3>Not supported</h3><p>jQuery only supports selectors that actually select DOM elements - everything else is ignored.</p><ul lastcheckbox="null"><li><b>E:link</b></li><li><b>E:visited</b> an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)</li><li><b>E:active</b></li><li><b>E:hover</b></li><li><b>E:focus</b> an E element during certain user actions</li><li><b>E:target</b> an E element being the target of the referring URI</li><li><b>E::first-line</b> the first formatted line of an E element</li><li><b>E::first-letter</b> the first formatted letter of an E element</li><li><b>E::selection</b> the portion of an E element that is currently selected/highlighted by the user</li><li><b>E::before</b> generated content before an E element</li><li><b>E::after</b> generated content after an E element</li></ul><p>jQuery doesn't support the following selectors due to their lack of real-world usefulness:</p><ul lastcheckbox="null"><li><b>E:nth-last-child(n)</b> an E element, the n-th child of its parent, counting from the last one</li><li><b>E:nth-of-type(n)</b> an E element, the n-th sibling of its type</li><li><b>E:nth-last-of-type(n)</b> an E element, the n-th sibling of its type, counting from the last one</li><li><b>E:first-of-type</b> an E element, first sibling of its type</li><li><b>E:last-of-type</b> an E element, last sibling of its type</li><li><b>E:only-of-type</b> an E element, only sibling of its type</li><li><b>E:lang(fr)</b> an element of type E in language &quot;fr&quot;</li><li><b>E[foo~=&quot;test&quot;]</b> an E element whose &quot;foo&quot; attribute value is a list of space-separated values, one of which is exactly equal to &quot;test&quot;</li><li><b>E[hreflang|=&quot;en&quot;]</b> an E element whose &quot;hreflang&quot; attribute has a hyphen-separated list of values beginning (from the left) with &quot;en&quot;</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Context and Anchoring" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=6">edit</a>]</div><p><a name="Context_and_Anchoring"></a></p><h3>Context and Anchoring</h3><p>In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function <code>$(expr, context)</code>. You can anchor a CSS-like expression to the context root by starting it with one of the selectors <code>&gt;</code>, <code>+</code>, or <code>~</code>.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: XPath Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=7">edit</a>]</div><p><a name="XPath_Selectors"></a></p><h2>XPath Selectors</h2><p>One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic <a class="external text" title="http://www.w3.org/TR/xpath" href="http://www.w3.org/TR/xpath">XPath expressions</a>, in addition to CSS 1-3. Here are some samples:</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Location Paths" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=8">edit</a>]</div><p><a name="Location_Paths"></a></p><h3>Location Paths</h3><ul><li>Relative to the entire HTML document</li></ul><pre> $(&quot;/html/body//p&quot;) $(&quot;body//p&quot;) $(&quot;p/../div&quot;)</pre><ul><li>Relative to the context node <code>this</code></li></ul><pre> $(&quot;p/*&quot;, this) $(&quot;/p//a&quot;, this)</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Axis Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=9">edit</a>]</div><p><a name="Supported_Axis_Selectors"></a></p><h3>Supported Axis Selectors</h3><ul><li><b>Descendant</b> Element has a descendant element</li></ul><pre> $(&quot;//div//p&quot;)</pre><ul><li><b>Child</b> Element has a child element</li></ul><pre> $(&quot;//div/p&quot;)</pre><ul><li><b>Preceding Sibling</b> Element has an element before it, on the same axes</li></ul><pre> $(&quot;//div ~ form&quot;)</pre><ul><li><b>Parent</b> Selects the parent element of the element</li></ul><pre> $(&quot;//div/../p&quot;)</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Predicates" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=10">edit</a>]</div><p><a name="Supported_Predicates"></a></p><h3>Supported Predicates</h3><ul><li><b>[@foo]</b> Has an attribute of foo</li></ul><pre> $(&quot;//input[@checked]&quot;)</pre><ul><li><b>[@foo='test']</b> Attribute foo is equal to test</li></ul><pre> $(&quot;//a[@ref='nofollow']&quot;)</pre><ul><li><b>[Nodelist]</b> Element contains a node list, for example:</li></ul><pre> $(&quot;//div[p]&quot;) $(&quot;//div[p/a]&quot;)</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Supported Predicates, but differently" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=11">edit</a>]</div><p><a name="Supported_Predicates.2C_but_differently"></a></p><h3>Supported Predicates, but differently</h3><ul><li><b>[last()] or [position()=last()]</b> becomes <b>:last</b></li></ul><pre> $(&quot;p:last&quot;)</pre><ul><li><b>[0] or [position()=0]</b> becomes <b>:eq(0) or&nbsp;:first</b></li></ul><pre> $(&quot;p:first&quot;) $(&quot;p:eq(0)&quot;)</pre><ul><li><b>[position() &lt; 5]</b> becomes <b>:lt(5)</b></li></ul><pre> $(&quot;p:lt(5)&quot;)</pre><ul><li><b>[position() &gt; 2]</b> becomes <b>:gt(2)</b></li></ul><pre> $(&quot;p:gt(2)&quot;)</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=12">edit</a>]</div><p><a name="Custom_Selectors"></a></p><h2>Custom Selectors</h2><p>jQuery includes some expressions that aren't available in either CSS or XPath, but were found to be very handy, so were included.</p><p>The following expressions' syntax is based upon the various CSS selectors, of similar names.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Custom Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=13">edit</a>]</div><p><a name="Custom_Selectors_2"></a></p><h3>Custom Selectors</h3><ul lastcheckbox="null"><li><b>:even</b> Selects every other (even) element from the matched element set.</li><li><b>:odd</b> Selects every other (odd) element from the matched element set.</li><li><b>:eq(0) and&nbsp;:nth(0)</b> Selects the Nth element from the matched element set</li><li><b>:gt(N)</b> Selects all matched elements whose index is greater than N.</li><li><b>:lt(N)</b> Selects all matched elements whose index is less than N.</li><li><b>:first</b> Equivalent to <b>:eq(0)</b></li><li><b>:last</b> Selects the last matched element.</li><li><b>:parent</b> Selects all elements which have child elements (including text).</li><li><b>:contains('test')</b> Selects all elements which contain the specified text.</li><li><b>:visible</b> 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)</li><li><b>:hidden</b> 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)</li></ul><p>Some examples:</p><pre> $(&quot;p:first&quot;).css(&quot;fontWeight&quot;,&quot;bold&quot;); $(&quot;div:hidden&quot;).show(); $(&quot;/div:contains('test')&quot;, this).hide();</pre><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: Form Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=14">edit</a>]</div><p><a name="Form_Selectors"></a></p><h3>Form Selectors</h3><p>There are a few selectors for form elements:</p><ul lastcheckbox="null"><li><b>:input</b> Selects all form elements (input, select, textarea, button).</li><li><b>:text</b> Selects all text fields (type=&quot;text&quot;).</li><li><b>:password</b> Selects all password fields (type=&quot;password&quot;).</li><li><b>:radio</b> Selects all radio fields (type=&quot;radio&quot;).</li><li><b>:checkbox</b> Selects all checkbox fields (type=&quot;checkbox&quot;).</li><li><b>:submit</b> Selects all submit buttons (type=&quot;submit&quot;).</li><li><b>:image</b> Selects all form images (type=&quot;image&quot;).</li><li><b>:reset</b> Selects all reset buttons (type=&quot;reset&quot;).</li><li><b>:button</b> Selects all other buttons (type=&quot;button&quot;).</li><li><b>:file</b> Selects all &lt;input type=&quot;file&quot;&gt;.</li></ul><p>Also available is <b>:hidden</b>, see the description above for details.</p><p>It is recommended to provide a context when using the above:</p><pre> $('#myForm&nbsp;:input')</pre><p>Or, if you have already a reference to your form:</p><pre> $('input:radio', myForm)</pre><p>This would select all input elements of type radio inside myForm. Using&nbsp;:radio is mostly the same as [@type=radio], but should be slightly faster. Good to know when working with large forms.</p><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: More Selectors" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=15">edit</a>]</div><p><a name="More_Selectors"></a></p><h3>More Selectors</h3><p>The jQuery selector system can be extended by third parties:</p><ul lastcheckbox="null"><li><a class="external text" title="http://www.softwareunity.com/sandbox/JQueryMoreSelectors/" href="http://www.softwareunity.com/sandbox/JQueryMoreSelectors/">More Selectors Plugin</a></li><li><a class="external text" title="http://www.malsup.com/jquery/expr/" href="http://www.malsup.com/jquery/expr/">Mike Alsup on Custom Selectors</a></li><li><a class="external text" title="http://jquery.com/dev/bugs/bug/312/" href="http://jquery.com/dev/bugs/bug/312/">Patch</a> to allow selection by CSS property (full plugin to be released simultaneously with 1.1)</li></ul><div class="editsection" style="float: right; margin-left: 5px">[<a title="Edit section: See Also" href="http://docs.jquery.com/action/edit/API/1.1.2/DOM/Traversing/Selectors?section=16">edit</a>]</div><p><a name="See_Also"></a></p><h3>See Also</h3><ul><li><a class="external text" title="http://www.woods.iki.fi/interactive-jquery-tester.html" href="http://www.woods.iki.fi/interactive-jquery-tester.html">Interactive jQuery selector tester</a></li></ul><div class="printfooter">Retrieved from &quot;<span class="external-link"><a class="no-external-link" href="http://docs.jquery.com/API/1.1.2/DOM/Traversing/Selectors" target="_blank"><i data-feather="external-link"></i>http://docs.jquery.com/API/1.1.2/DOM/Traversing/Selectors</a></span>&quot;</div>