糯米文學吧

位置:首頁 > 範文 > 工作方案

jQuery內容過濾選擇器的使用方法詳解

在實踐中,可以在基本選擇器的基礎上添加過濾選擇器來完成查詢任務,根據具體情況,在過濾選擇器中可以使用元素的索引值、內容、屬性、子元素位置、表單

jQuery內容過濾選擇器的使用方法詳解

域屬性以及可見性作為篩選條件

1. :first選擇器

格式:複製代碼 代碼如下:$("selector: first")用於對當前jQuery集合進行過濾並選擇出第一個匹配元素

實例:複製代碼 代碼如下:$("td:first")("border", "2px solid blue");

2. :last選擇器

格式:複製代碼 代碼如下:$("selector: last")用於對當前jQuery集合進行過濾並選擇出最後一個匹配元素

實例:複製代碼 代碼如下:$("td:last")("border", "2px solid blue");

3. :odd選擇器

格式:複製代碼 代碼如下:$("selector: odd")用於選擇索引為奇數(從0開始計數)的所有元素

實例:複製代碼 代碼如下:$("td:odd")("background", "red");

4. :even選擇器

格式:複製代碼 代碼如下:$("selector: even")用於選擇索引為偶數(從0開始計數)的所有元素

實例:複製代碼 代碼如下:$("td:even")("background", "red");

5. :eq選擇器

格式:複製代碼 代碼如下:$("selector:eq(index)")用於從匹配的集合中選擇索引等於給定值的元素

實例:複製代碼 代碼如下:$("li:eq(1)")("color", "blue");

6. :gt選擇器

格式:複製代碼 代碼如下:$("selector:gt(index)")用於從匹配的集合中選擇索引大於給定值的所有元素

實例:複製代碼 代碼如下:$("li:gt(0)")("color", "green");

7. :lt選擇器

格式:複製代碼 代碼如下:$("selector:lt(index)")用於從匹配的集合中選擇索引大於給定值的所有元素

實例:複製代碼 代碼如下:$("li:lt(5)")("color", "green");

若要查找索引大於n1小於n2的所有元素,可以使用數組選擇器,

複製代碼 代碼如下:$("selector:gt(n1), selector:lt(n2)");

8. :not選擇器

格式:複製代碼 代碼如下:$("selector1:not(selector2)")用於從匹配的集合中去除所有與給定選擇器匹配的元素

實例:複製代碼 代碼如下:$("td:not(:first, :last)")("background", "red"); //除了第一個和最後一個單元格,其他的.單元格的背景色為紅色

9. :header選擇器

格式:複製代碼 代碼如下:$(":header")用於選擇所有諸如h1, h2, h3之類的標題元素

10. :animated選擇器

格式:複製代碼 代碼如下:$("selector:animated")用於選擇所有正在執行動畫效果的元素

簡單示例

複製代碼 代碼如下:

希望本文所述對大家的jQuery程序設計有所幫助。