基本篩選選擇器

很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規范，而是jQuery自己為了開發者的便利延展出來的選擇器

篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

?

注意事項：

:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引

gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

gt：greater than ；lt：less than

內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上

內容過濾器描述如下表：

注意事項：

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。

:parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

可見性篩選選擇器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden

描述如下：

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴于適用的樣式

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

CSS display的值是none。

type="hidden"的表單元素。

寬度和高度都顯式設置為0。

一個祖先元素是隱藏的，該元素是不會在頁面上顯示

CSS visibility的值是hidden

CSS opacity的指是0

如果元素中占據文檔中一定的空間,元素被認為是可見的。 可見元素的寬度或高度，是大于零。 元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間布局。

不在文檔中的元素是被認為是不可見的，如果當他們被插入到文檔中，jQuery沒有辦法知道他們是否是可見的，因為元素可見性依賴于適用的樣式

屬性篩選選擇器

屬性選擇器讓你可以基于屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

描述如下：

瀏覽器支持：

• [att=val]、[att]、[att|=val]、[att~=val]? 屬于CSS 2.1規范
• [ns|attr]、[att^=val]、[att*=val]、[att$=val] 屬于CSS3規范
• [name!="value"]? 屬于jQuery 擴展的選擇器

CSS選擇器無論CSS2.1版本還是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持

在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等 [attr*="value"]能在網站中幫助我們匹配不同類型的文件

子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要復雜點

子元素篩選選擇器描述表：

注意事項：

:first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當于:nth-child(1)

:last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最后一個子元素

如果子元素只有一個的話，:first-child與:last-child是同一個

?:only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配

jQuery實現:nth-child(n)是嚴格來自CSS規范，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的

nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往后計算，后者從后往前計算

轉載于:https://www.cnblogs.com/sMKing/p/5804177.html

總結

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

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