JQuery常規選擇器入門

一、簡單選擇器

在使用JQuery選擇器時，我們首先必須使用“$（）”函數來包裝我們的CSS規則。而CSS規則作爲參數傳遞到JQuery對象內部後，再返回包含頁面中對應元素的JQuery對象。隨後，我們就可以對這個獲取到的DOM節點進行行爲操作了。

//使用ID 選擇器的CSS 規則：
#box { 
    //將ID 爲box 的元素字體顏色變紅
    color：red;
}

在JQuery選擇器裏，我們使用如下方式來獲取同樣的結果：

//獲取DOM節點對象，並添加行爲。
$('#box').css('color'，'red');

那麼除了ID選擇器之外，還有兩種基本的選擇器：元素標籤名和類（class）。

CSS選擇器與JQuery選擇器對比

選擇器	CSS模式	JQuery模式	描述
元素標籤選擇器	div{ }	$('div')	獲取所有div元素的DOM對象
ID選擇器	#box{ }	$('#box')	獲取一個ID爲box元素的DOM對象
類選擇器(class)	.box	$('.box')	獲取所有class爲box的所有DOM對象

二、進階選擇器

      在簡單選擇器中，我們瞭解了最基本的三種選擇器：元素標籤名、ID和類（class）。那麼在基礎選擇器外，還有一些進階和高級的選擇器方便我們進行更精準的選擇元素。

獲取多個選擇器的DOM對象

選擇器	CSS模式	JQuery模式	描述
羣組選擇器	span,.box{ }	$('span,.box')	獲取多個選擇器的DOM對象
後代選擇器	ul li a{ }	$('ui li a')	獲取追溯到的多個DOM對象
通配選擇器	*{ }	$('*')	獲取所有元素標籤名的DOM對象

 

• CSS選擇器用法：

//羣組選擇器
span, .box { //多種選擇器添加紅色字體
    　　color：red;
}


//後代選擇器
ul li a { //層層追溯到的元素添加紅色字體
    　　color：red;
}

//通配選擇器
 * { //頁面所有元素都添加紅色字體
    　　color：red;
}

• JQuery選擇器用法:

//羣組選擇器JQuery方式
$('span, .box').css('color', 'red'); 

//後代選擇器JQuery方式
$('ul li a').css('color', 'red'); 

//通配選擇器
$('*').css('color', 'red');

目前介紹的六種選擇器，在實際應用中，我們可以靈活地搭配，使得選擇器更加精準和快速：

//組合了多種選擇器。
$('#box p，ul li *').css('color'，'red');

警告：在實際使用上，通配選擇器一般用得並不多，尤其是在大通配上，比如：$（'*'）。這種使用方法效率很低，影響性能，建議儘可能少用。還有一種選擇器，可以在ID和類（class）中指明元素前綴，比如：

//限定必須是.box元素
$（'div.box'）;
$（'p#box div.side'）;//同上

類（class）有一個特殊的模式，就是同一個DOM節點可以聲明多個類（class）。那麼對於這種格式，我們有多class選擇器可以使用，但要注意和class羣組選擇器的區別。多class選擇器是指必須一個DOM節點同時有多個class，用這些class進行精確限定。而羣組class選擇器，只不過是多個class進行選擇而已。

$（'.box，.pox'）.css（'color'，'red'）;//加了逗號，體會區別。

警告：在構造選擇器時，有一個通用的優化原則：只追求必要的確定性。當選擇器篩選越複雜，JQuery內部的選擇器引擎處理字符串的時間就越長。比如：

$（'div#box ul li a#link'）;//讓JQuery內部處理了不必要的字符串
$（'#link'）;//ID是唯一性的，準確度不變，性能提升

 三、高級選擇器

在前面我們學習了六種最常規的選擇器，一般來說通過這六種選擇器基本上可以解決所有DOM節點對象選擇的問題。但在很多特殊的元素上，比如父子關係的元素、兄弟關係的元素、特殊屬性的元素等。在早期CSS的使用上，由於IE6等低版本瀏覽器不支持，所以這些高級選擇器的使用也不具備普遍性，但隨着JQuery兼容，這些選擇器的使用頻率也越來越高。

層次選擇器

選擇器	CSS模式	JQuery模式	描述
後代選擇器	ul li a { }	$（'ul li a'）	獲取追溯到的多個DOM對象
子選擇器	div > p { }	$（'div p'）	只獲取子類節點的多個DOM對象
next選擇器	div + p { }	$（'div + p'）	只獲取某節點後一個同級DOM對象
nextAll選擇器	div ~ p { }	$（'div ~ p'）	獲取某節點後面所有同級DOM對象

在層次選擇器中，除了後代選擇器之外，其他三種高級選擇器是不支持IE6的，而JQuery卻是兼容IE6的。

   //後代選擇器
    $（'#box p'）.css（'color'， 'red'）； //全兼容

    JQuery爲後代選擇器提供了一個等價find（）方法

    $（'#box'）.find（'p'）.css（'color'， 'red'）； //和後代選擇器等價

    //子選擇器，孫子後失明
    #box > p { //IE6 不支持
    　　color：red；
    }

    $（'#box > p'）.css（'color'， 'red'）； //兼容IE6

JQuery爲子選擇器提供了一個等價children（）方法：

$（'#box'）.children（'p'）.css（'color'， 'red'）； //和子選擇器等價 

//next選擇器（下一個同級節點）
#box + p { //IE6不支持
   color：red；
}
    
$（'#box+p'）.css（'color'， 'red'）； //兼容IE6

JQuery爲next 選擇器提供了一個等價的方法next（）：

$（'#box'）.next（'p'）.css（'color'， 'red'）； //和next 選擇器等價

//nextAll選擇器（後面所有同級節點）
#box ~ p { //IE6不支持
   color：red；
}

$（'#box ~ p'）.css（'color'， 'red'）； //兼容IE6

JQuery爲nextAll選擇器提供了一個等價的方法nextAll（）：

$（'#box'）.nextAll（'p'）.css（'color'，'red'）；//和nextAll選擇器等價

層次選擇器對節點的層次都是有要求的。比如子選擇器，只有子節點纔可以被選擇到，孫子節點和重孫子節點都無法選擇到。next和nextAll選擇器必須是同一個層次的後一個和後N個，不在同一個層次就無法選取到了。

        在find（）、next（）、nextAll（）和children（）這四個方法中，如果不傳遞參數，就相當於傳遞了“*”，即任何節點。我們不建議這麼做，不但影響性能，而且由於精準度不佳可能在複雜的HTML結構時產生怪異的結果。

$（'#box'）.next（）；//相當於$（'#box'）.next（'*'）；

爲了補充高級選擇器的這三種模式，JQuery還提供了更加豐富的方法來選擇元素：

$（'#box'）.prev（'p'）.css（'color'，'red'）；//同級上一個元素
$（'#box'）.prevAll（'p'）.css（'color'，'red'）；//同級所有上面的元素

nextUntil（）和prevUnitl（）方法是選定同級的下面或上面的所有節點，選定非指定的所有元素，一旦遇到指定的元素就停止選定。

$（'#box'）.prevUntil（'p'）.css（'color'，'red'）；//同級上非指定元素選定，遇到則停止
$（'#box'）.nextUntil（'p'）.css（'color'，'red'）；//同級下非指定元素選定，遇到則停止

siblings（）方法正好集成了prevAll（）和nextAll（）兩個功能的效果，以及上下相鄰的所有元素進行選定：

$（'#box'）.siblings（'p'）.css（'color'， 'red'）； //同級上下所有元素選定
//等價於下面：
$（'#box'）.prevAll（'p'）.css（'color'， 'red'）； //同級上所有元素選定
$（'#box'）.nextAll（'p'）.css（'color'， 'red'）； //同級下所有元素選定

注意：我們應該推薦使用哪種方案呢？其實，使用哪種方案都差不多。這裏，我們推薦使用JQuery提供的方法。因爲不但方法的速度比高級選擇器運行得更快，並且它的靈活性和擴展性要高於高級選擇器。使用“+”或“~”從字面上沒有next和nextAll更加語義化，更加清晰，JQuery的方法更加豐富，提供了相對的prev和prevAll。畢竟JQuery是編程語言，需要能夠靈活的拆分和組合選擇器，而使用CSS模式過於死板。所以，如果JQuery提供了獨立的方法來代替某些選擇器的功能，我們還是推薦優先使用獨立的方法。

屬性選擇器

CSS模式	JQuery模式	描述
E［A］	$('E[A]')	匹配表簽名爲E的所有元素，這些元素擁有特性A
E［A = V］	$('E[A = V]')	匹配表簽名爲E的所有元素，這些元素的A特性值爲V
E［A ^= V］	$('E[A ^= V]')	匹配表簽名爲E的所有元素，這些元素的A特性值以V開頭
E［A |= V］	$('E[A |= V]')	匹配表簽名爲E的所有元素，這些元素的A特性值等於V或開頭屬性值匹配V後面跟一個“-”號
E［A $= V］	$('E[A $= V]')	匹配表簽名爲E的所有元素，這些元素的A特性值以V結尾
E［A != V］	$('E[A != V]')	匹配表簽名爲E的所有元素，這些元素的A特性值不等於V
E［A ~= V］	$('E[A ~= V]')	匹配表簽名爲E的所有元素，這些元素的A特性值是以空格分隔的列表幷包含V
E［A *= V］	$('E[A *= V]')	匹配表簽名爲E的所有元素，這些元素的A特性值包含V

• JQuery屬性選擇器舉例：

//匹配herf特性值以http://開頭的鏈接
a[herf^='http://']

//匹配type特性爲text的所有<input>元素
input[type='text']

//匹配title特性值以my開頭的所有div元素
div[title^='my']

//匹配herf特性值以.pdf結尾的鏈接
a[herf$='.pdf']

//獲取指向JQuery站點的所有<a>元素
a[herf*='jquery.com']

以上只是JQuery的基礎選擇器，更高級的選擇器(過濾選擇器)將在下一篇文章介紹。