本文實(shí)例講述了jQuery選擇器之基本過(guò)濾選擇器用法。分享給大家供大家參考，具體如下：

前面一篇介紹了層次選擇器，今天我們學(xué)習(xí)一下jQuery的另一種選擇器：基本過(guò)濾選擇器。過(guò)濾選擇器可以過(guò)濾掉自己不想要的東西，也就是說(shuō)過(guò)濾后留下的都是自己需要的。jQuery過(guò)濾選擇器就是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的DOM元素，jQuery過(guò)濾選擇器的過(guò)濾規(guī)則與CSS偽類(lèi)選擇器語(yǔ)法是相同的都以冒號(hào)（:）開(kāi)頭。按照過(guò)濾規(guī)則的不同，我們通常把jQuery過(guò)濾選擇器分為：基本過(guò)濾、屬性過(guò)濾、內(nèi)容過(guò)濾、子元素過(guò)濾、表單對(duì)象屬性過(guò)濾、可見(jiàn)性過(guò)濾等。今天我們主要學(xué)習(xí)一下其中的“基本過(guò)濾選擇器”。

一、:first

選擇器：:first
描述：獲取匹配的第一個(gè)元素
返回值：?jiǎn)蝹€(gè)元素

示例：

$("E:first")//E是DOM元素集合，:first是過(guò)濾條件

二、:last

選擇器：:last
描述：獲取匹配的最后一個(gè)元素
返回值：?jiǎn)蝹€(gè)元素

示例：

$("E:last")//E是DOM元素集合，:last是過(guò)濾條件

三、:not(selector)

選擇器：:not(selector)
描述：去除所有與給定選擇器selector匹配的元素。
返回值：元素集合

示例：

$("div.aaa:not(#two)")//div.aaa是DOM元素集合，:not(#two)是過(guò)濾條件

四、:even

選擇器：:even
描述：匹配所有索引值為偶數(shù)的元素，索引值從 0 開(kāi)始計(jì)數(shù)。
返回值：元素集合

示例：

$("tr.item:even")//tr:item是DOM元素集合，:even是過(guò)濾條件

五、:odd

選擇器：:odd
描述：匹配所有索引值為奇數(shù)的元素，索引值從 0 開(kāi)始計(jì)數(shù)。
返回值：元素集合

示例：

$("tr.item:odd")//tr.item是DOM元素集合，:odd是過(guò)濾條件

六、:eq(index)

選擇器：:eq(index)
描述：匹配一個(gè)給定索引值的元素，索引值從 0 開(kāi)始計(jì)數(shù)。
返回值：?jiǎn)蝹€(gè)元素

示例：

$("tr.item:eq(0)")//tr.item是DOM元素集合，:eq(0)是過(guò)濾條件

七、:gt(index)

選擇器：:gt(index)
描述：匹配所有大于給定索引值的元素，索引值從 0 開(kāi)始計(jì)數(shù)。
返回值：元素集合

示例：

$("tr.item:gt(2)")//tr.item是DOM元素集合，:gt(2)是過(guò)濾條件

八、:lt(index)

選擇器：:lt(index)
描述：
返回值：

示例：

$("tr.item:lt(2)")//tr.item是DOM元素集合，:lt(2)是過(guò)濾條件

九、:header

選擇器：:header
描述：匹配如h1、h2、h3之類(lèi)的標(biāo)題元素
返回值：元素集合

示例：

$(":header")//:header是指頁(yè)面的所有標(biāo)題h1~h6

十、:animated

選擇器：:animated
描述：匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素。
返回值：元素集合

示例：

$("E:animated")//E是DOM元素集合，:animated是過(guò)濾條件
$("div:not(:animated)").animate({left:"+=20"}, 1000);

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論