jQuery學習筆記——jQuery常規選擇器

一．簡單選擇器
在使用 jQuery 選擇器時，咱們首先必須使用「$()」函數來包裝咱們的 CSS 規則。而
CSS 規則做爲參數傳遞到 jQuery 對象內部後，再返回包含頁面中對應元素的 jQuery 對象。
隨後，咱們就能夠對這個獲取到的 DOM 節點進行行爲操做了。
#box {
//使用 ID 選擇器的 CSS 規則
color:red;
//將 ID 爲 box 的元素字體顏色變紅
}
在 jQuery 選擇器裏，咱們使用以下的方式獲取一樣的結果：
$('#box').css('color', 'red');
//獲取 DOM 節點對象，並添加行爲
那麼除了 ID 選擇器以外，還有兩種基本的選擇器，分別爲：元素標籤名和類(class)：
選擇器
CSS 模式
jQuery 模式
描述
元素名
div {}
$('div')
獲取全部 div 元素的 DOM 對象
ID
#box {}
$('#box')
獲取一個 ID 爲 box 元素的 DOM 對象
類(class)
.box{}
$('.box')
獲取全部class爲box的全部DOM對象
$('div').css('color', 'red');
//元素選擇器，返回多個元素
$('#box').css('color', 'red');
//ID 選擇器，返回單個元素
$('.box').css('color', 'red');
//類(class)選擇器，返回多個元素
爲了證實 ID 返回的是單個元素，而元素標籤名和類(class)返回的是多個，咱們能夠採
用 jQuery 核心自帶的一個屬性 length 或 size()方法來查看返回的元素個數。
alert($('div').size());
//3 個
alert($('#box').size());
//1 個，後面兩個失明瞭
alert($('.box').size());
//3 個
同理，你也能夠直接使用 jQuery 核心屬性來操做：
alert($('#box').length);
//1 個，後面失明瞭
警告：有個問題特別要注意，ID 在頁面只容許出現一次，咱們通常都是要求開發者要
遵照和保持這個規則。但若是你在頁面中出現三次，而且在 CSS 使用樣式，那麼這三個元
素還會執行效果。但若是，你想在 jQuery 這麼去作，那麼就會遇到失明的問題。因此，開
發者必須養成良好的遵照習慣，在一個頁面僅使用一個 ID。
$('#box').css('color', 'red');
//只有第一個 ID 變紅，後面兩個失明
jQuery 選擇器的寫法與 CSS 選擇器十分相似，只不過他們的功能不一樣。CSS 找到元素
後添加的是單一的樣式，而 jQuery 則添加的是動做行爲。最重要的一點是：CSS 在添加樣
式的時候，高級選擇器會對部分瀏覽器不兼容，而 jQuery 選擇器在添加 CSS 樣式的時候卻
沒必要爲此煩惱。
#box > p {
//CSS 子選擇器，IE6 不支持
color:red;
}
$('#box > p').css('color','red');
//jQuery 子選擇器，兼容了 IE6
jQuery 選擇器支持 CSS一、CSS2 的所有規則，支持 CSS3 部分實用的規則，同時它還有
少許獨有的規則。因此，對於已經掌握 CSS 的開發人員，學習 jQuery 選擇器幾乎是零成本。
而jQuery 選擇器在獲取節點對象的時候不但簡單，還內置了容錯功能，這樣避免像 JavaScript
那樣每次對節點的獲取須要進行有效判斷。
$('#pox').css('color', 'red');
//不存在 ID 爲 pox 的元素，也不報錯
document.getElementById('pox').style.color = 'red';
//報錯了
由於 jQuery 內部進行了判斷，而原生的 DOM 節點獲取方法並無進行判斷，因此導
致了一個錯誤，原生方法能夠這麼判斷解決這個問題：
if (document.getElementById('pox')) {
//先判斷是否存在這個對象
document.getElementById('pox').style.color = 'red';
}
那麼對於缺失不存在的元素，咱們使用 jQuery 調用的話，怎麼去判斷是否存在呢？因
爲自己返回的是 jQuery 對象，可能會致使不存在元素存在與否，都會返回 true。
if ($('#pox').length > 0) {
//判斷元素包含數量便可
$('#pox').css('color', 'red');
}
除了這種方式以外，還能夠用轉換爲 DOM 對象的方式來判斷，例如：
if ($('#pox').get(0)) {} 或 if ($('#pox')[0]) {}
//經過數組下標也能夠獲取 DOM 對象
二．進階選擇器
在簡單選擇器中，咱們瞭解了最基本的三種選擇器：元素標籤名、ID 和類(class)。那麼
在基礎選擇器外，還有一些進階和高級的選擇器方便咱們更精準的選擇元素。
選擇器
CSS 模式
jQuery 模式
描述
羣組選擇器
span,em,.box {}
$('span,em,.box')
獲取多個選擇器的 DOM 對象
後代選擇器
ul li a {}
$('ul li a')
獲取追溯到的多個 DOM 對象
通配選擇器
* {}
$('*')
獲取全部元素標籤的 DOM 對象
//羣組選擇器
span, em, .box {
//多種選擇器添加紅色字體
color:red;
}
$('span, em, .box').css('color', 'red');
//羣組選擇器 jQuery 方式
//後代選擇器
ul li a {
//層層追溯到的元素添加紅色字體
color:red;
}
$('ul li a').css('color', 'red');
//羣組選擇器 jQuery 方式
//通配選擇器
* {
//頁面全部元素都添加紅色字體
color:red;
}
$('*').css('color', 'red');
//通配選擇器
目前介紹的六種選擇器，在實際應用中，咱們能夠靈活的搭配，使得選擇器更加的精準
和快速：
$('#box p, ul li *').css('color', 'red');
//組合了多種選擇器
警告：在實際使用上，通配選擇器通常用的並很少，尤爲是在大通配上，好比：$('*')，
這種使用方法效率很低，影響性能，建議竟可能少用。
還有一種選擇器，能夠在 ID 和類(class)中指明元素前綴，好比：
$('div.box');
//限定必須是.box 元素獲取必須是 div
$('p#box div.side');
//同上
類(class)有一個特殊的模式，就是同一個 DOM 節點能夠聲明多個類(class)。那麼對於這
種格式，咱們有多 class 選擇器可使用，但要注意和 class 羣組選擇器的區別。
.box.pox {
//雙 class 選擇器，IE6 出現異常
color:red;
}
$('.box.pox').css('color', 'red');
//兼容 IE6，解決了異常
多 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 兼容，這些選擇器的使用頻率也越
來越高。
層次選擇器
在層次選擇器中，除了後代選擇器以外，其餘三種高級選擇器是不支持 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');
//和子選擇器等價
選擇器
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對象
//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');
//同級下全部元素選定
警告：切不可寫成「$('#box').prevAll('p').nextAll('p').css('color', 'red');」這種形式，由於
prevAll('p')返回的是已經上方全部指定元素，而後再 nextAll('p')選定下方全部指定元素，這
樣必然出現錯誤。
理論上來說，jQuery 提供的方法 find()、next()、nextAll()和 children()運行速度要快於使
用高級選擇器。由於他們實現的算法有所不一樣，高級選擇器是經過解析字符串來獲取節點對
象，而 jQuery 提供的方法通常都是單個選擇器，是能夠直接獲取的。但這種快慢的差別，
對於客戶端腳原本說沒有太大的實用性，而且速度的差別還要取決了瀏覽器和選擇的元素內
容。好比，在 IE6/7 不支持 querySelectorAll()方法，則會使用「Sizzle」引擎，速度就會慢，
而其餘瀏覽器則會很快。有興趣的能夠了解這個方法和這個引擎。
選擇器快慢分析：
//這條最快，會使用原生的 getElementById、ByName、ByTagName 和 querySelectorAll()
$('#box').find('p');
//jQuery 會自動把這條語句轉成$('#box').find('p')，這會致使必定的性能損失。它比最快
的形式慢了 5%-10%
$('p', '#box');
//這條語句在 jQuery 內部，會使用$.sibling()和 javascript 的 nextSibling()方法，一個個遍
歷節點。它比最快的形式大約慢 50%
$('#box').children('p');
//jQuery 內部使用 Sizzle 引擎，處理各類選擇器。Sizzle 引擎的選擇順序是從右到左，
因此這條語句是先選 p，而後再一個個過濾出父元素#box，這致使它比最快的形式大約慢
70%
$('#box > p');
//這條語句與上一條是一樣的狀況。可是，上一條只選擇直接的子元素，這一條能夠於
選擇多級子元素，因此它的速度更慢，大概比最快的形式慢了 77%。
$('#box p');
//jQuery 內部會將這條語句轉成$('#box').find('p')，比最快的形式慢了 23%。
$('p', $('#parent'));
綜上所屬，最快的是 find()方法，最慢的是$('#box p')這種高級選擇器。若是一開始將
$('#box')進行賦值，那麼 jQuery 就對其變量進行緩存，那麼速度會進一步提升。
var box = $('#box');
var p = box.find('p');
注意：咱們應該推薦使用哪一種方案呢？其實，使用哪一種都差很少。這裏，咱們推薦使用
jQuery 提供的方法。由於不但方法的速度比高級選擇器運行的更快，而且它的靈活性和擴展
性要高於高級選擇器。使用「+」或「~」從字面上沒有 next 和 nextAll 更加語義化，更加清
晰，jQuery 的方法更加豐富，提供了相對的 prev 和 prevAll。畢竟 jQuery 是編程語言，須要
可以靈活的拆分和組合選擇器，而使用 CSS 模式過於死板。因此，若是 jQuery 提供了獨立
的方法來代替某些選擇器的功能，咱們仍是推薦優先使用獨立的方法。
屬性選擇器
CSS 模式
jQuery 模式
描述
a[title]
$('a[title]')
獲取具備這個屬性的 DOM 對象
a[title=num1]
$('a[title=num1]')
獲取具備這個屬性=這個屬性值的DOM對
象
a[title^=num]
$('a[title^=num]')
獲取具備這個屬性且開頭屬性值匹配的
DOM 對象
a[title|=num]
$('a[title|=num]')
獲取具備這個屬性且等於屬性值或開頭屬
性值匹配後面跟一個「-」號的 DOM 對象
a[title$=num]
$('a[title$=num]')
獲取具備這個屬性且結尾屬性值匹配的
DOM 對象
a[title!=num]
$('a[title!=num]')
獲取具備這個屬性且不等於屬性值的
DOM 對象
a[title~=num]
$('a[title~=num]')
獲取具備這個屬性且屬性值是以一個空格
分割的列表，其中包含屬性值的 DOM 對
象
a[title*=num]
$('a[title*=num]')
獲取具備這個屬性且屬性值含有一個指定
字串的 DOM 對象
a[bbb][title=num1]
$('a[bbb][title=num1]')
獲取具備這個屬性且屬性值匹配的 DOM
對象
屬性選擇器也不支持 IE6，因此在 CSS 界若是要兼容低版本，那麼也是非主流。但 jQuery
卻沒必要考慮這個問題。
//選定這個屬性的
a[title] {
//IE6 不支持
color:red;
}
$('a[title]').css('color', 'red');
//兼容 IE6 了
//選定具備這個屬性=這個屬性值的
a[title=num1] {
//IE6 不支持
color:red;
}
$('a[title=num1]').css('color', 'red');
//兼容 IE6 了
//選定具備這個屬性且開頭屬性值匹配的
a[title^=num] {
//IE6 不支持
color:red;
}
$('a[title=^num]').css('color', 'red');
//兼容 IE6 了
//選定具備這個屬性且等於屬性值或開頭屬性值匹配後面跟一個「-」號
a[title|=num] {
//IE6 不支持
color:red;
}
$('a[title|="num"]').css('color', 'red');
//兼容 IE6 了
//選定具備這個屬性且結尾屬性值匹配的
a[title$=num] {
//IE6 不支持
color:red;
}
$('a[title$=num]').css('color','red');
//兼容 IE6 了
//選定具備這個屬性且屬性值不想等的
a[title!=num1] {
//不支持此 CSS 選擇器
color:red;
}
$('a[title!=num1]').css('color','red');
//jQuery 支持這種寫法
//選定具備這個屬性且屬性值是以一個空格分割的列表，其中包含屬性值的
a[title~=num] {
//IE6 不支持
color:red;
}
$('a[title~=num1]').css('color','red');
//兼容 IE6
//選定具備這個屬性且屬性值含有一個指定字串的
a[title*=num] {
//IE6 不支持
color:red;
}
$('a[title*=num]').css('color','red');
//兼容 IE6
//選定具備多個屬性且屬性值匹配成功的
a[bbb][title=num1] {
//IE6 不支持
color:red;
}
$('a[bbb][title=num1]').css('color','red');
//兼容 IE6