1. 程式人生 > >jQuery偽類選擇器

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…….hn

//文字選擇器:

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