發布時間: 2018-10-26 09:22:20
?過濾選擇器簡稱:過濾器。它其實也是一種選擇器,而這種選擇器類似與 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元素
注意::focus過濾器,必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。 而不是鼠標點擊或者Tab鍵盤敲擊激活的。
$('input').get(0).focus(); //先初始化激活一個元素焦點
$(':focus').css('background','red'); //被焦點的元素
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'); //同上
?