1. 程式人生 > >jQuery之過濾選擇器

jQuery之過濾選擇器

可見 通過 規則 rst nim 開發 center box borde

過濾選擇器

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