jQuery选择器之基本过滤选择器(3)
jQuery的层级选择器中主要包括::first选择器、:last选择器、:not(selector)选择器、:even选择器、:odd选择器、:eq选择器、:lt(index)选择器、:gl(index)选择器、:header选择器、:animated选择器、:focus选择器。共11种。
以下实例演示都是通过的元素颜色的变化展示。
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_1_20210923032125974.png)
1、:first选择器
获取第一个元素。
$("#btn1").click(function () {
$("div:first").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_2_20210923032126349.png)
2、:last选择器
获取最后一个元素。
$("#btn2").click(function () {
$("div:last").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_3_20210923032126693.png)
3、:not(selector)选择器
去除所有给定选择器匹配的元素。
$("#btn3").click(function () {
$("div:not(.one)").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_4_2021092303212784.png)
4、:even选择器
获取索引值为偶数的元素,索引值从0开始。
$("#btn4").click(function () {
$("div:even").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_5_20210923032127381.png)
5、:odd选择器
获取索引为奇数的元素,索引值从1开始。
$("#btn5").click(function () {
$("div:odd").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_6_20210923032127724.png)
6、:eq(index)选择器
匹配到一个给定索引值的元素
$("#btn7").click(function () {
$("div:eq(3)").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_7_2021092303212899.png)
7、:lt(index)选择器
匹配所有小于给定索引值的元素。 less than
$("#btn8").click(function () {
$("div:lt(3)").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_8_20210923032128459.png)
8、:gt(index)选择器
匹配所有大于给定索引值的元素。greater than
$("#btn6").click(function () {
$("div:gt(3)").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_9_20210923032128849.png)
匹配h1,h2,h3等标题元素
10、:animated选择器
匹配所有正在执行动画效果的元素。
$("#btn10").click(function () {
$("div:animated").css("background-color","#bbffaa");
});
![](http://image109.360doc.com/DownloadImg/2021/09/2315/230841815_10_20210923032129381.png)
11、:focus选择器
触发每一个正在匹配元素的focus,这样将触发所有绑定的focus函数,注意某些对象不支持focus方法。
|