[JQuery Note]Selector 2

The previous article records some attribute-selector and CSS-selector.

 

Today ,let's dig in some more about position-selector.

 

Sometime,we may need to select element by their position on the page.

 

we can use '${a:first}' to match the first element of tag a.

 

also we can use '${a:last}' to match the last element of tag a.

 

Code	Effect	Example
:first	match the first element.	a:first
:last	match the last element.	input:last
:odd	match every odd elements.	li:odd
:even	match every even elements	li:even
:first-child	match the first item of each list.	example1
:first-last	match the last item of each list	example1
:only-child	match the element who doesn't have siblings	example1
:nth-child(m)	match the mth child element.m starts at 1.	li:nth-child(0)
:nth-child(even|odd)	match the even or odd elements	li:nth-child(even|odd)
:nth-child(3n+1)	match the xth element computed by the formula, and n can be zero.	li:nth-child(3n+1)
:eg(n)	match the nth element matchings.	example1
:gt(n)  greater than	match matching elements after and excluding the nth element.
:lt(n)   lower than	match matching elements before and excluding the nth element.

 

example1:

 

<ul class="myList">

  <li><a href="http://jquery.com">jQuery supports</a>

    <ul>

      <li><a href="css1">CSS1</a></li>

      <li><a href="css2">CSS2</a></li>

      <li><a href="css3">CSS3</a></li>

      <li>Basic XPath</li>

    </ul>

  </li>

  <li>jQuery also supports

    <ul>

      <li>Custom selectors</li>

      <li>Form selectors</li>

    </ul>

  </li>

</ul>

$(li:first-child) means: 

     <li><a href="http://jquery.com">jQuery supports</a>

     <li><a href="css1">CSS1</a></li>

     <li>Custom selectors</li>

     are selected.

 

$(li:eg(0)) means:

      <li><a href="http://jquery.com">jQuery supports</a>

      is selected.

 

$(li:nth-child(1)) is same to $(li:first-child)

 

$(li:nth-child(1):eq(1)) means 

       <li><a href="css1">CSS1</a></li>

        is selected.