jQuery之過濾選擇器
過濾選擇器
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之過濾選擇器