zoukankan      html  css  js  c++  java
  • JQuery 位置选择器 详解

    :first       The first match of the page. (匹配找到的第一个元素)

    声明         $("tr:first")

    返回        

      <tr>
          <th>Language</th>
          <th>Type</th>
          <th>Invented</th>
      </tr>



    :last       The last match of the page. (匹配找到的最后一个元素)

    声明        $("tr:last")

    返回        

    <tr>
          <td>C++</td>
          <td>Static</td>
          <td>1983</td> 
    </tr>


    :first-child       The first child element. (匹配第一个子元素)

    声明                 $("table tr:first-child")

                     或  $("tbody td:first-child")

    返回

           $("table tr:first-child")

      <thead>
        <tr> …  </tr>
      </thead>
      <tbody>
        <tr>…   </tr>

         …

      </tbody>

    $("tbody td:first-child")

    <tbody>
        <tr> <td>Java</td> 
          …

        </tr>
        <tr> <td>Ruby</td> 
          …    </tr>
        <tr>
          <td>Smalltalk</td>
                …

        </tr>
        <tr>
          <td>C++</td> 
          ..

        </tr>
      </tbody>

    image


    :last-child        The last child element. (匹配最后一个子元素)

    声明                  $("li:last-child")

    返回                  和以上first-child相反,就不贴结果了。看图就可以了

    image


    :only-child         Returns all elements that have no siblings. (如果某个元素是父元素中唯一的子元素,那将会被匹配)

    声明                   $("div label:only-child")

    注意                   div中只有一个label,这才会被匹配,如果父元素中含有其他元素,那将不会被匹配。

    image
    对应Html

    <div><label>Some images:</label></div>


    :nth-child(n)      The nth child element. (匹配其父元素下的第N个子或奇偶元素)

    声明                     $("div image:nth-child(2)")

    返回                     返回 绿色第二条

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>
    </div>

    注意                     nth-child从1开始的,而:eq()是从0算起的!

    其他形式

    :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(2)
    :nth-child(3n+1)
    :nth-child(3n+2)


    :nth-child(even|odd)    Even or odd children.  (返回偶数/奇数)

    声明                               $("div image:nth-child(even)")

    返回

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>
    </div>


    :nth-child(Xn+Y)      The nth child element computed by the supplied formula. (倍数分组匹配)

    声明       $("div:nth-child(3n+1)")

    注意       这里比较难理解,仔细阅读

    定义       先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,

                 其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。

    div:nth-child(3n+1)    匹配第1、第4、第7、…、每3个为一组的第1个div

    div:nth-child(3n+5)    匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个div

    div:nth-child(5n-1)     匹配第5-1=4、第10-1=9、…、第5的倍数减1个div

    div:nth-child(3n±0)    相当于(3n)

    div:nth-child(±0n+3)  相当于(3)

    图:

    div:nth-child(3n+1)

    image

    对应的Html

    <div>…</div>
    <div>…</div> 第1个
    <div id="someDiv">…</div>
    <div title="myTitle2">…</div>
    <div title="myTitle1">…</div> 第2个
      <div>…  </div>
      <div>…  </div> 第3个
      <div>…  </div>

    div:nth-child(3n+2)

    image

    对应的Html

    <div>…</div>第3个
    <div>…</div>

    <div id="someDiv">…</div>
    <div title="myTitle1">…</div>第1个
    <div title="myTitle2">…</div>


      <div>…  </div>第2个
      <div>…  </div>
      <div>…  </div>

    :nth-child(-an+b)

    此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。

    例子:

    div:nth-child(-3n+8)   匹配第8、第5和第2个div

    div:nth-child(-1n+8) 

          或(-n+8)              匹配前8个(包括第8个)div,这个较为实用点,用来限定前面N个匹配常会用到


    :even and :odd      Even and odd matching elements page-wide. (匹配所有索引值为偶数的元素,从 0 开始计数)

    声明       $("img:even")

    返回     

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>
    </div>


    :eq(n)        The nth matching element. (获取第N个元素)

    声明            $("img:eq(2)")

    返回     

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>
    </div>


    :gt(n)         Matching elements after (and excluding) the nth matching element.(匹配所有大于给定索引值的元素)

    声明             $("img:gt(2)")

    返回     

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>

    </div>


    :lt(n)           Matching elements before (and excluding) the nth matching element.(匹配所有小于给定索引值的元素

    声明             $("img:lt(2)")

    返回     

    <div>
      <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
      <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>

      <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
      <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
      <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
      <img src="images/image.6.jpg" id="coffeePot"/>
    </div>


    完整Html代码:

    <table id="languages" border="0" cellspacing="1">
      <thead>
        <tr>
          <th>Language</th>
          <th>Type</th>
          <th>Invented</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Java</td>
          <td>Static</td>
          <td>1995</td>
        </tr>
        <tr>
          <td>Ruby</td>
          <td>Dynamic</td>
          <td>1993</td>
        </tr>
        <tr>
          <td>Smalltalk</td>
          <td>Dynamic</td>
          <td>1972</td>
        </tr>
        <tr>
          <td>C++</td>
          <td>Static</td>
          <td>1983</td>
        </tr>
      </tbody>
    </table>

  • 相关阅读:
    2014-11-27-0047-Java
    js去除数组中重复值
    一个数据表更新另外一个数据表(SQL)
    《js12种设计模式》
    《可编辑td》
    《JS 隔行换色》
    用Autohotkey让Kitty命令行变得更好用
    View epub and mobi File on Linux
    DrJava试用笔记
    Notes about BSD
  • 原文地址:https://www.cnblogs.com/RuiLei/p/1549705.html
Copyright © 2011-2022 走看看