jQuery偽類選擇器

//偽類選擇器：

  特定位置的選擇器：

     jQuery（“selector:first”）//第一個

jQuery（“selector:last”）//最后一個

 

jQuery（“selector:eq(index)”）//指定位置

   <div>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

    </div>

    <script type="text/javascript">

      $(function (){

         $("img:first").css("border","solid 5px green");

         $("img:last").css("border","solid 5px red");

         $("img:eq(3)").css("border","solid 5px black");

      })

    </script>

//指定范圍選擇器：

jQuery（“selector:even”）//選擇偶數序列

jQuery（“selector:odd”）//選擇奇數序列

jQuery（“selector:gt(index)”）//大於index索引

jQuery（“selector:lt(index)”）//小於index索引

//

<div>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

    </div>

    <script type="text/javascript">

      $(function (){

         $("img:odd").css("border","solid 5px green");

         $("img:gt(2)").css("border","solid 5px black");

      })

    </script>

排除選擇器：

  jQuery（“selector1：not(selector2)”）

//

<div>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

         <img src="../img/飄雪.jpg" width="200px" height="200px"/>

    </div>

    <script type="text/javascript">

      $(function (){

         $("img:gt(2)").css("border","solid 5px black");

         $("img:not(img:gt(3))").css("border","solid 5px red");

        

      })

    </script>

//特殊選擇器：

jQuery(“selector:animate”)//選擇動畫元素

jQuery(“selector:header”)//選擇標題（h1…….h_n）

//文本選擇器：

jQuery(“selector:contains(text)”)//匹配包含text文本的序列

jQuery(“selector1:has(selector2)”)//匹配包含selector2標簽的序列

jQuery(“selector:empty”)//匹配不含子元素或文本的序列

jQuery(“selector:parent”)// 匹配含子元素或文本的序

//顯示狀態偽類選擇器：

jQuery(“selector:hidden”)//匹配所有不可見的元素jQuery(“selector:parent”)//匹配所有可見元素

 jQuery(“selector:nth-child(N)”)//匹配父元素下的第N個子元素

jQuery(“selector:first-child”)//匹配第一個子元素

jQuery(“selector:last-child”)//匹配最后一個元素

jQuery(“selector:only-child”)//匹配只有一個子元素的元素