jQuery之過濾選擇器

過濾選擇器

1.基本選擇器

2.內容選擇器

3.可見性選擇器

4.子元素過濾器

過濾選擇器簡稱：過濾器。它其實也是一種選擇器，而這種選擇器類似於css3(裡的偽類,可以讓不支援css3的

瀏覽器也能支援。和常規的選擇器一樣，jquery為了更方便開發者使用，提供了很多獨有的過濾器。

一、基本過濾器

過濾器主要通過特定的過濾規則來篩選所需的dom元素，和css中的偽類的語法類似：使用冒號（:）開頭。

過濾器名

jquery語法

說明返回

:first　

$('li :first')

選取第乙個元素

單個元素

:last

$('li :last')

選取最後乙個元素

單個元素

:not(selecter)

$('li :not(.red)')

選取class不是red的li元素

集合元素

:even

$('li :even')

選擇索引（0 開始）是偶數的所有元素

集合元素

:odd

$('li :odd')

選擇索引（0 開始）是奇數的所有元素

集合元素

:eq(index)

$('li :eq(2)')

選擇索引（0 開始）等於index的元素

單個元素

:gt(index)

$('li :gt(2)')

選擇索引（0 開始）大於index的元素

集合元素

:lt(index)

$('li :lt(2)')

選擇索引（0 開始）小於index的元素

集合元素

:header

$('li :header')

選擇標題元素，h1~h6

集合元素

:animated

$('li :animated')

選擇正在執行動畫的元素

集合元素

:focus

$('li :focus')

選擇當前被焦點的元素

集合元素

jquery為最常用的過濾器提供了專用的方法，以達到提高效能和效率的作用：

$('li').eq(2).css('background','#ccc');  //元素li的第三個元素，負數從後開始

$('li').first().css('background','#ccc');  //元素li的第乙個元素

$('li').last().css('background','#ccc');  //元素li的最後乙個元素

$('li').not(.red).css('background','#ccc');  //元素li不含class為red的元素

注意：:first、:last和first()、last()這兩組過濾器和方法在出現相同元素的時候，first會實現第乙個父元素的第乙個子元素，last會實現最後乙個父元素的最後乙個子元素，所以，如果需要明確是哪個父元素，需要指明：

$('#box li:last').css('background','#ccc');  //#box元素的最後乙個li

//或$('#box li').last().css('background','#ccc')  //同上

二、內容過濾器

內容過濾器的過濾規則主要是包含的子元素或文字內容上。

過濾器名

jquery語法

說明返回

:contains(text)

$(':contains("ycku.com")')

選取含有"ycku.com"文字的元素

元素集合

:empty

$(':empty')

選取不包含子元素或空文字的元素

元素集合

:has(selector)

$(':has(.red)')

選取含有class是red的元素

元素集合

:parent

$(':parent')

選取含有子元素或文字的元素

元素集合

jquery提供了乙個has()方法來提高.has過濾器的效能:

$('ul').has(.red).css('background','#ccc')  //選擇子元素含有class是red的元素

jquery提供了乙個名稱和:parent相似的方法，但這個方法並不是選取含有子元素或文字的元素，而是選取當前元素的父元素，返回是元素集合。　　

$('li').parent().css('background','#ccc')  //選擇當前元素的父元素

$('li').parents().css('background','#ccc') //選擇當前元素的父元素及祖先元素

$('li').parentsuntil('div').css('background','#ccc')  //選擇當前元素的父元素及祖先元素，遇到div父元素停止

三、可見性過濾器

可見性過濾器根據元素的可見性和不可見性來選擇相應的元素。

過濾器名

jquery語法

說明返回

:hidden

$(':hidden')

選取所有不可見元素

集合元素

:visible

$(':visible')

選取所有可見元素

集合元素

$('p:hidden').size();  //元素p隱藏的元素

$('p:visible').size();  //元素p顯示的元素

注意：hidden過濾器一般包含的內容為：css樣式為display:none、input表單型別為type="hidden"和visibility:hidden的元素。

四、子元素過濾器

子元素過濾器的過濾規則是通過父元素和子元素的關係來獲取相應的元素。

過濾器名

jquery語法

說明返回

:first-child

$('li:first-child')

獲每個父元素的第乙個子元素

集合元素

:last-child

$('li:last-child')

獲取每個父元素的最後乙個子元素

集合元素

:only-child

$('li:only-child')

獲取只有乙個子元素的元素

集合元素

:nth-child(odd/even/eq(index))

$('li:nth-child(even)')

獲取每個自定義子元素的元素(索引值從 "1" 開始計算)

集合元素

五、其他方法

jquery在選擇器和過濾器上，還提供了一些常用的方法，方便我們開發時靈活使用。

方法名jquery語法

說明返回

is(s/o/e/f)

$('li').is('.red')

傳遞選擇器、dom、jquery物件

集合元素

hasclass(class)

$('li').hasclass('red')

其實就是is("."+class)

集合元素

end()

$('div').find('p').end()

獲取當前元素前乙個狀態（當前元素的前乙個元素）

集合元素

contents()

$('div').contents()

獲取某元素下面所有元素節點,包括文字你節點

集合元素

$('.red').is('li');  //true，選擇器，檢測class是否為red

$('li').eq(2).hasclass('red');  //和is一樣，只不過只能傳遞class

jQuery之過濾選擇器

在原有選擇器匹配的元素中進一步進行過濾的選擇器 基本 內容 可見性 屬性 需求1.選擇第乙個div 2.選擇最後乙個class為box的元素 3.選擇所有class屬性不為box的div 4.選擇第二個和第三個li元素 5.選擇內容為bbbbb的li 6.選擇隱藏的li 7.選擇有title屬性的l...

9 JQuery選擇器之過濾選擇器

過濾選擇器 1.首元素選擇器 語法 first 獲得選擇的元素中的第乙個元素 2.尾元素選擇器 語法 last 獲得選擇的元素中的最後乙個元素 3.非元素選擇器 語法 not selector 不包括指定內容的元素 4.偶數選擇器 語法 even 偶數，從 0 開始計數 5.奇數選擇器 語法 odd...

jQuery過濾選擇器 基本過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的dom元素，過濾規則與css中的偽類選擇器語法相同，即選擇器都以乙個冒號 開頭。按照不同的過濾規則，過濾選擇器可以分為基本過濾 內容過濾 可見性過濾 屬性過濾 子元素過濾和表單物件屬性過濾選擇器。基本過濾選擇器 選擇器 描述 返回 示例 first 選...