jQuery選擇器之基本過濾選擇器（3）

jQuery的層級選擇器中主要包括：:first選擇器、:last選擇器、:not(selector)選擇器、:even選擇器、:odd選擇器、:eq選擇器、:lt(index)選擇器、:gl(index)選擇器、:header選擇器、:animated選擇器、:focus選擇器。共11種。

以下例項演示都是通過的元素顏色的變化展示。

1、:first選擇器

獲取第一個元素。

$("#btn1").click(function () {
	$("div:first").css("background-color","#bbffaa");
});
 

2、:last選擇器

獲取最後一個元素。

$("#btn2").click(function () {
	$("div:last").css("background-color","#bbffaa");
});

3、:not(selector)選擇器

去除所有給定選擇器匹配的元素。

$("#btn3").click(function () {
	$("div:not(.one)").css("background-color","#bbffaa");
});
 

4、:even選擇器

獲取索引值為偶數的元素，索引值從0開始。

$("#btn4").click(function () {
	$("div:even").css("background-color","#bbffaa");
});

5、:odd選擇器

獲取索引為奇數的元素，索引值從1開始。

$("#btn5").click(function () {
	$("div:odd").css("background-color","#bbffaa");
});
 

6、:eq(index)選擇器

匹配到一個給定索引值的元素

$("#btn7").click(function () {
	$("div:eq(3)").css("background-color","#bbffaa");
});

7、:lt(index)選擇器

匹配所有小於給定索引值的元素。 less than

$("#btn8").click(function () {
	$("div:lt(3)").css("background-color","#bbffaa");
});

8、:gt(index)選擇器

匹配所有大於給定索引值的元素。greater than

$("#btn6").click(function () {
	$("div:gt(3)").css("background-color","#bbffaa");
});

9、:header選擇器

匹配h1,h2,h3等標題元素

10、:animated選擇器

匹配所有正在執行動畫效果的元素。

$("#btn10").click(function () {
	$("div:animated").css("background-color","#bbffaa");
});

11、:focus選擇器

觸發每一個正在匹配元素的focus,這樣將觸發所有繫結的focus函式，注意某些物件不支援focus方法。