第一百六十五節，jQuery，過濾選取器

標籤：box   selector   color   tab   執行   images   eve   可見度   src   

jQuery，過濾選取器

 

學習要點：

　　1.基本過濾器

　　2.內容過濾器

　　3.可見度過濾器

　　4.子項目過濾器

　　5.其他方法

 

過濾選取器簡稱：過濾器。它其實也是一種選取器，而這種選取器類似與 CSS3 (http://t.mb5u.com/css3/)裡的偽類，可以讓不支援 CSS3 的低版本瀏覽器也能支援。和常規 選取器一樣，jQuery 為了更方便開發人員使用，提供了很多專屬的過濾器。

 

一．基本過濾器

過濾器主要通過特定的過濾規則來篩選所需的 DOM 元素，和 CSS 中的偽類的文法類 似：使用冒號(:)開頭。

 

 

$(‘li:first‘).css(‘background‘, ‘#ccc‘); //第一個元素$(‘li:last).css(‘background‘, ‘#ccc‘); //最後一個元素$(‘li:not(.red)).css(‘background‘, ‘#ccc‘); //非 class 為 red 的元素$(‘li:even‘).css(‘background‘, ‘#ccc‘); //索引為偶數的元素$(‘li:odd).css(‘background‘, ‘#ccc‘); //索引為奇數的元素$(‘li:eq(2)).css(‘background‘, ‘#ccc‘); //指定索引值的元素$(‘li:gt(2)‘).css(‘background‘, ‘#ccc‘); //大於索引值的元素$(‘li:lt(2)‘).css(‘background‘, ‘#ccc‘); //小於索引值的元素$(‘:header‘).css(‘background‘, ‘#ccc‘); //頁面所有 h1 ~ h6 元素

:first，文法$(‘li:first‘)，選取第一個元素，返回單個元素

:last，文法，$(‘li:last‘)，選取最後一個元素，返回單個元素

:not(selector)，文法，$(‘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，文法，$(‘:header‘)，選擇標題元素，h1 ~ h6，返回集合元素

 

:animated，文法，$(‘:animated‘)，選擇正在執行動畫的元素，返回集合元素

 

注意：:focus 過濾器，必須是網頁初始狀態的已經被啟用焦點的元素才能實現元素擷取。 而不是滑鼠點擊或者 Tab 鍵盤敲擊啟用的。

:focus，文法，$(‘:focus‘)，選擇當前被焦點的元素，返回集合元素

$(‘input‘).get(0).focus(); //先初始化啟用一個元素焦點$(‘:focus‘).css(‘background‘, ‘red‘); //被焦點的元素

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

eq(2)方法，擷取集合節點裡指定索引的節點，參數是指定的索引，返回單個節點

 

first()方法，擷取集合節點裡第一個節點，無參，返回單個節點

 

last()方法，擷取集合節點裡第最後一個節點，無參，返回單個節點

 

not(‘.red‘)方法，擷取集合節點裡不含 class 為 red 的元素，返回集合

$(‘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，過濾選取器