過濾選擇器

　　1.基本選擇器

　　2.內容選擇器

　　3.可見性選擇器

　　4.子元素過濾器

?過濾選擇器簡稱：過濾器。它其實也是一種選擇器，而這種選擇器類似于CSS3(http://t.mb5u.com/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

轉載于:https://www.cnblogs.com/elementplay/p/8306828.html

總結

以上是生活随笔為你收集整理的jQuery之过滤选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。