jQuery選擇器——基本過濾選擇器
前一章介紹了層次選擇器,今天我們學習一下jQuery的另一種選擇器:基本過濾選擇器。過濾選擇器可以過濾掉自己不想要的東西,也就是說過濾後留下的都是自己需要的。jQuery過濾選擇器就是通過特定的過濾規則來篩選出所需的DOM元素,jQuery過濾選擇器的過濾規則與CSS偽類選擇器語法是相同的都以冒號(:)開頭。按照過濾規則的不同,我們通常把jQuery過濾選擇器分為:基本過濾、屬性過濾、內容過濾、子元素過濾、表單物件屬性過濾、可見性過濾等。今天我們主要學習一下其中的“基本過濾選擇器”。
一、:first
選擇器::first
描述:獲取匹配的第一個元素
返回值:單個元素
示例:
$("E:first")//E是DOM元素集合,:first是過濾條件
二、:last
選擇器::last
描述:獲取匹配的最後一個元素
返回值:單個元素
示例:
$("E:last")//E是DOM元素集合,:last是過濾條件
三、:not(selector)
選擇器::not(selector)
描述:去除所有與給定選擇器selector匹配的元素。
返回值:元素集合
示例:
$("div.aaa:not(#two)")//div.aaa是DOM元素集合,:not(#two)是過濾條件
四、:even
選擇器::even
描述:匹配所有索引值為偶數的元素,索引值從 0 開始計數。
返回值:元素集合
示例:
$("tr.item:even")//tr:item是DOM元素集合,:even是過濾條件
五、:odd
選擇器::odd
描述:匹配所有索引值為奇數的元素,索引值從 0 開始計數。
返回值:元素集合
示例:
$("tr.item:odd")//tr.item是DOM元素集合,:odd是過濾條件
六、:eq(index)
選擇器::eq(index)
描述:匹配一個給定索引值的元素,索引值從 0 開始計數。
返回值:單個元素
示例:
$("tr.item:eq(0)")//tr.item是DOM元素集合,:eq(0)是過濾條件
七、:gt(index)
選擇器::gt(index)
描述:匹配所有大於給定索引值的元素,索引值從 0 開始計數。
返回值:元素集合
示例:
$("tr.item:gt(2)")//tr.item是DOM元素集合,:gt(2)是過濾條件
八、:lt(index)
選擇器::lt(index)
描述:
返回值:
示例:
$("tr.item:lt(2)")//tr.item是DOM元素集合,:lt(2)是過濾條件
九、:header
選擇器::header
描述:匹配如h1、h2、h3之類的標題元素
返回值:元素集合
示例:
$(":header")//:header是指頁面的所有標題h1~h6
十、:animated
選擇器::animated
描述:匹配所有正在執行動畫效果的元素。
返回值:元素集合
示例:
$("E:animated")//E是DOM元素集合,:animated是過濾條件
$("div:not(:animated)").animate({left:"+=20"}, 1000);
相關文章
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jQuery選擇器——內容過濾選擇器jQuery
- jQuery選擇器——子元素過濾選擇器jQuery
- jQuery選擇器——屬性過濾選擇器jQuery
- jQuery選擇器——表單元素過濾選擇器jQuery
- jQuery選擇器——可見性過濾選擇器jQuery
- jQuery選擇器——基本選擇器jQuery
- jQuery子元素過濾選擇器jQuery
- jQuery選擇器——層次選擇器jQuery
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- jQuery選擇器之層次選擇器jQuery
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- JQuery選擇器——可見性篩選選擇器和屬性篩選選擇器jQuery
- jQuery選擇器(下)jQuery
- jQuery 選擇器效率jQuery
- Jquery的選擇器jQuery
- jQuery :last選擇器jQueryAST
- jQuery .class選擇器jQuery
- jQuery element選擇器jQuery
- jQuery #id選擇器jQuery
- [JS] jQuery選擇器JSjQuery
- jQuery系列:選擇器jQuery
- jQuery選擇器大全jQuery
- jQuery 選擇器彙總-思維導圖-選擇器jQuery
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- jquery九大選擇器jQuery
- jquery中的選擇器jQuery
- jQuery 後代選擇器jQuery
- jQuery parent>child選擇器jQuery
- jQuery 分組選擇器jQuery
- jQuery常用的選擇器jQuery
- jQuery - 選擇器詳解jQuery
- jQuery選擇器總結jQuery
- jquery屬性選擇器jQuery
- css的基本選擇器CSS
- jQuery 3教程(二):jQuery選擇器jQuery
- jQuery入門-DOM/$/選擇器jQuery