jQuery選擇器之基本過濾選擇器用法實(shí)例分析
本文實(shí)例講述了jQuery選擇器之基本過濾選擇器用法。分享給大家供大家參考，具體如下：
前面一篇介紹了層次選擇器，今天我們學(xué)習(xí)一下jQuery的另一種選擇器：基本過濾選擇器。過濾選擇器可以過濾掉自己不想要的東西，也就是說過濾后留下的都是自己需要的。jQuery過濾選擇器就是通過特定的過濾規(guī)則來篩選出所需的DOM元素，jQuery過濾選擇器的過濾規(guī)則與CSS偽類選擇器語(yǔ)法是相同的都以冒號(hào)（:）開頭。按照過濾規(guī)則的不同，我們通常把jQuery過濾選擇器分為：基本過濾、屬性過濾、內(nèi)容過濾、子元素過濾、表單對(duì)象屬性過濾、可見性過濾等。今天我們主要學(xué)習(xí)一下其中的“基本過濾選擇器”。
一、:first
選擇器：:first
描述：獲取匹配的第一個(gè)元素
返回值：?jiǎn)蝹€(gè)元素
示例：
$("E:first")//E是DOM元素集合，:first是過濾條件
二、:last
選擇器：:last
描述：獲取匹配的最后一個(gè)元素
返回值：?jiǎn)蝹€(gè)元素
示例：
$("E:last")//E是DOM元素集合，:last是過濾條件
三、:not(selector)
選擇器：:not(selector)
描述：去除所有與給定選擇器selector匹配的元素。
返回值：元素集合
示例：
$("div.aaa:not(#two)")//div.aaa是DOM元素集合，:not(#two)是過濾條件
四、:even
選擇器：:even
描述：匹配所有索引值為偶數(shù)的元素，索引值從 0 開始計(jì)數(shù)。
返回值：元素集合
示例：
$("tr.item:even")//tr:item是DOM元素集合，:even是過濾條件
五、:odd
選擇器：:odd
描述：匹配所有索引值為奇數(shù)的元素，索引值從 0 開始計(jì)數(shù)。
返回值：元素集合
示例：
$("tr.item:odd")//tr.item是DOM元素集合，:odd是過濾條件
六、:eq(index)
選擇器：:eq(index)
描述：匹配一個(gè)給定索引值的元素，索引值從 0 開始計(jì)數(shù)。
返回值：?jiǎn)蝹€(gè)元素
示例：
$("tr.item:eq(0)")//tr.item是DOM元素集合，:eq(0)是過濾條件
七、:gt(index)
選擇器：:gt(index)
描述：匹配所有大于給定索引值的元素，索引值從 0 開始計(jì)數(shù)。
返回值：元素集合
示例：
$("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之類的標(biāo)題元素
返回值：元素集合
示例：
$(":header")//:header是指頁(yè)面的所有標(biāo)題h1~h6
十、:animated
選擇器：:animated
描述：匹配所有正在執(zhí)行動(dòng)畫效果的元素。
返回值：元素集合
示例：
$("E:animated")//E是DOM元素集合，:animated是過濾條件
$("div:not(:animated)").animate({left:"+=20"}, 1000);
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
下面介紹幾個(gè)jQuery常用的方法，來讓jQuery的威力發(fā)揮出來，否則只用有限的幾個(gè)方法，相對(duì)于運(yùn)行速度問題，真不如不用jQuery2013-10-10
jquery的ajax如何使用ajaxSetup做全局請(qǐng)求攔截
在Web開發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對(duì)Ajax請(qǐng)求進(jìn)行全局?jǐn)r截和處理,以便統(tǒng)一處理一些共性問題,如權(quán)限驗(yàn)證、錯(cuò)誤處理等,本項(xiàng)目方案將介紹如何使用jQuery的Ajax實(shí)現(xiàn)全局請(qǐng)求攔截2023-11-11
jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery插件Validation表單驗(yàn)證的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼
這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
jQuery代碼實(shí)現(xiàn)實(shí)時(shí)獲取時(shí)間
這篇文章主要介紹了jQuery代碼實(shí)現(xiàn)實(shí)時(shí)獲取時(shí)間功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
jquery入門—編寫一個(gè)導(dǎo)航條(可伸縮)
編寫一個(gè)導(dǎo)航條，單擊標(biāo)題時(shí)，可以伸縮導(dǎo)航條內(nèi)容，簡(jiǎn)化內(nèi)容或顯示更多內(nèi)容等等效果相當(dāng)不錯(cuò)，感興趣的朋友可以了解下哦2013-01-01
jquery動(dòng)態(tài)更換設(shè)置背景圖的方法
這篇文章主要介紹了jquery動(dòng)態(tài)更換網(wǎng)頁(yè)背景圖的方法,需要的朋友可以參考下2014-03-03
deferred對(duì)象是jQuery的回調(diào)函數(shù)解決方案，jQuery之前的版本中異步回調(diào)這塊做的不是很好，所以后期補(bǔ)上了該解決方案。接下來通過本文給大家介紹jQuery中的derferred使用方法，非常不錯(cuò)，需要的朋友參考下2017-03-03
很多人可能都會(huì)遇到在調(diào)試的時(shí)候用了return了false，可為什么還會(huì)提交呢？這個(gè)問題我最近也碰到了，嘗試了多次也沒有用，后來終于發(fā)現(xiàn)了其中的問題，下面分享處理給大家，讓同樣遇到這個(gè)問題的朋友們能夠看看，有需要的朋友們下面來一起看看吧。2016-10-10