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”)//匹配只有一个子元素的元素