10

jQuery Selector Expressions

CSS

CSS DOM Tree
This sentence is in <div id="myid">. It is followed by a horizontal rule.

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

  • This is the first list item (<li>) in an unordered list (<ul>).
  • This is the second list item. It has a link in it.
  • This is the third list item. It has a class of "myclass otherclass"
  • This is the fourth list item. It has strong text and emphasized text.
    • second-level list item 1
    • second-level list item 2

<p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread.

T

$('p')
$('code')

#myid

$('div#myid')
$('#myid')

.myclass

$('.myclass')
$('p.myclass')
$('.otherclass.myclass')

E F

$('div code')
$('ul strong')

E > F

$('li > ul')
$('p > code')

E + F

$('ul + p')
$('strong + em')

E ~ F

$('p ~ ul')
$('code ~ code')

E,F,G

$('code,strong,em')
$('strong,p')

:nth-child(n)

$('li:nth-child(2)')
$('p:nth-child(5)')

:first-child

$('li:first-child')
$('strong:first-child')

:last-child

$('li:last-child')
$('code:last-child')

:only-child

$(':only-child')
$('code:only-child')

:empty

$(':empty')
$('hr:empty')

:not(s)

$('li:not(.myclass[ul])')
$('li:not(:last-child)')

*

$('*')
$('p > *')

XPath

XPath DOM Tree

(link has rel="nofollow self") This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

  • This is the first list item (<li>) in an unordered list (<ul>).
  • This is the second list item. It has a link with lots of attributes in it.
  • This is the third list item. It has a class of "myclass"
  • This is the fourth list item. It has strong text and emphasized text.
    • second-level list item 1
    • second-level list item 2

<p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread.

E//F

$('p//code')
$('ul//a')

E/F

$('li/ul')
$('p/code')

E/..

$('code/..')
$('p/../ul')
$('li/../../../../ul')

[F]

$('li[.myclass]')
$('p[code]')

[@foo]

$('a[@rel]')
$('li[@class]')

[@foo=bar]

$('a[@rel=self]')
$('li[@class=myclass]')
$('a[@rel=nofollow self]')
$('a[@rel="nofollow self"]')

[@foo!=bar]

$('a[@rel!=nofollow]')
$('li[@class!=myclass]')

[@foo^=bar]

$('a[@rel^=s]')
$('[@class^=my]')

E[@foo$=bar]

$('a[@title$=blog]')
$('[@class$=class]')

E[@foo*=bar]

$('a[@title*=jQuery]')
$('[@class*=cla]')

Form

Form DOM Tree

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

:input

$(':input')

:text

$(':text')

:password

$(':password')

:button

$(':button')

:image

$(':image')

:reset

$(':reset')

:checked

$(':checked')

Custom

Custom DOM Tree

This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>.

  • This is the first list item (<li>) in an unordered list (<ul>).
  • This is the second list item. It has a link in it.
  • This is the third list item. It has a class of "myclass"
  • This is the fourth list item. It has strong text and emphasized text.
    • second-level list item 1
    • second-level list item 2

<p class="myclass">This is another paragraph. It has class="myclass" Otherwise, nothing special about it at all. It is here for example purposes only. It has no other reason to exist. If the paragraph were conscious and aware of its own state, it would be filled with existential dread.

:even

$('li:even')
$('code:even')

:odd

$('li:odd')
$('code:odd')

:eq(n) and E:nth(n)

$('li:eq(2)')
$('p:nth(1)')

:gt(n)

$('li:gt(2)')
$('code:gt(3)')

:lt(n)

$('li:lt(2)')
$('code:lt(3)')

:first

$('li:first')
$('code:first')

:last

$('li:last')
$('code:last')

:parent

$('li:parent')
$('p:parent')

:contains(test)

$('li:contains("second")')
$('p:contains("nothing special")')

:visible

$('li:visible')
$('li:hidden')

:hidden

$('li[strong]')
$('p[code]')