jQuery 選擇器引擎

jQuery 最核心的組成部分就是：選擇器引擎。它繼承了 CSS 的語法，可以對 DOM 元 素的標籤名、屬性名、狀態等進行快速準確的選擇，並且不必擔心瀏覽器的兼容。

---

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

使用 ID 選擇器的 CSS 規則 ：

#box{ color:red; }

使用ID選擇器的jQuery規則：

$('#box').css('color','red');  //獲取dom節點對象，並添加樣式

那麼除了ID選擇器外，還有兩種基本的選擇器，一個是類（class），一個是標籤名。

$('div').css('color','red'); //元素選擇器，返回多個元素 

$('#box').css('color','red'); //ID 選擇器，返回單個元素 

$('.box').css('color','red'); //類(class)選擇器，返回多個元素

警告：有個問題特別要注意，ID 在頁面只允許出現一次，我們一般都是要求開發者要 遵守和保持這個規則。但如果你在頁面中出現三次，並且在 CSS 使用樣式，那麼這三個元 素還會執行效果。但如果，你想在 jQuery 這麼去做，那麼就會遇到失明的問題。所以，開 發者必須養成良好的遵守習慣，在一個頁面僅使用一個 ID。

有一點是：CSS 在添加樣 式的時候，高級選擇器會對部分瀏覽器不兼容，而 jQuery 選擇器在添加 CSS 樣式的時候卻 不必爲此煩惱。
舉例：

#box>p{ color:red; }                //CSS 子選擇器，IE6 不支持
$('#box>p').css('color','red');    //jQuery 子選擇器，兼容了 IE6

jQuery選擇器在獲取節點對象的時候不但簡單，還內置了容錯功能，這樣避免像JavaScript 那樣每次對節點的獲取需要進行有效判斷。

$('#pox').css('color','red');      //不存在 ID 爲 pox 的元素，也不報錯 
document.getElementById('pox').style.color='red';   //報錯

那麼對於缺失不存在的元素，我們使用 jQuery 調用的話，怎麼去判斷是否存在呢？因 爲本身返回的是 jQuery 對象，可能會導致不存在元素存在與否，都會返回 true。

//判斷元素包含數量即可 
if($('#pox').length>0{$('#pox').css('color','red'); }

二、進階選擇器

$('span,em,.box').css('color','red');   //羣組選擇器
$('ullia').css('color','red');          //後代選擇器
$('*').css('color','red');              //通配選擇器

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

$('#boxp,ulli*').css('color','red');   //組合了多種選擇器

警告：在實際使用上，通配選擇器一般用的並不多，尤其是在大通配上，比如：$(‘*’)， 這種使用方法效率很低，影響性能，建議竟可能少用。

多 class 選擇器是必須一個 DOM 節點同時有多個 class，用這多個 class 進行精確限定。 而羣組 class 選擇器，只不過是多個 class 進行選擇而已。

$('.box.pox').css('color','red');     //精確定位
$('.box,.pox').css('color','red');    //加了逗號，體會區別

三．高級選擇器 （層級選擇器）

在層次選擇器中，除了後代選擇器之外，其他三種高級選擇器是不支持 IE6 的，而 jQuery 卻是兼容 IE6 的，同時jQuery提供了幾種方法。

$('#boxp').css('color', 'red');     //後代選擇器
$('#box').find('p').css('color','red');    //find()，和後代選擇器等同

$('#box>p').css('color','red');    //子選擇器
$('#box').children('p').css('color','red'); //children()，和子選擇器等同

$('#box+p').css('color', 'red');   //next選擇器
$('#box').next('p').css('color','red');  //next()，和next選擇器等同

$('#box~p').css('color','red');  //nxetAll選擇器
$('#box').nextAll('p').css('color','red'); //nextAll（），和nextAlL選擇器等同

在 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');  

四、屬性選擇器

//獲取具有這個屬性的 DOM 對象
$('a[title]') 

//獲取具有這個屬性=這個屬性值的DOM對 象
$('a[title=num1]') 

//獲取具有這個屬性且開頭屬性值匹配的 DOM 對象
$('a[title^=num]')

//獲取具有這個屬性且等於屬性值或開頭屬 性值匹配後面跟一個“-”號的 DOM 對象
$('a[title|=num]')

//獲取具有這個屬性且結尾屬性值匹配的 DOM 對象
$('a[title$=num]')

//獲取具有這個屬性且不等於屬性值的 DOM 對象
 $('a[title!=num]')

//獲取具有這個屬性且屬性值是以一個空格 分割的列表，其中包含屬性值的 DOM 對 象
 $('a[title~=num]')

//獲取具有這個屬性且屬性值含有一個指定 字串的 DOM 對象
$('a[title*=num]')

//獲取具有這個屬性且屬性值匹配的 DOM 對象
$('a[bbb][title=num1]')

關於屬性選擇器，演示出來比較麻煩，就簡化了。就醬。