選擇器是jQuery的根基吧趣，在jQuery中仁热，遍歷DOM、事件處理渠缕、CSS控制鸽素、動(dòng)畫設(shè)計(jì)和AJAX操作都依賴于選擇器

1、jQuery選擇器介紹和優(yōu)勢

jQuery選擇器采用CSS和Xpath選擇器語法規(guī)范亦鳞，能夠滿足用戶在DOM中快速匹配元素或元素集合馍忽。它有如下優(yōu)勢：

• 簡化代碼書寫
• 完善的支持。支持不同CSS版本和不同類型瀏覽器
• 完善的處理機(jī)制蚜迅。jQuery選擇器的核心依然是JavaScript的原生方法舵匾，如getElementById()和getElementsByTagName()等方法俊抵，但是封裝了原生方法的使用谁不，簡化了代碼書寫又避免了易錯(cuò)問題

jQuery選擇器返回值均是一個(gè)偽數(shù)組對象，如果沒有匹配元素徽诲，則會(huì)返回一個(gè)空的偽數(shù)組對象刹帕，因此判斷一個(gè)jQuery對象是否存在，要使用數(shù)組長度來判斷谎替。

if($('tr').length > 0) {
   // 處理代碼
}

而不要使用

if($('tr')) {
   // 處理代碼
}

jQuery選擇器分為基本選擇器偷溺、結(jié)構(gòu)選擇器、過濾選擇器钱贯、屬性選擇器以及表單選擇器等挫掏。

2、基本選擇器

• ID選擇器

var element = document.getElementById('id')等價(jià)于jQuery("#id")

• 類型選擇器

var elements = document.getElementsByTagName('tagName')等價(jià)于jQuery("tagName")

• 類選擇器

var elements = document.getElementsByClassName('className')等價(jià)于jQuery(".className")

• 通配選擇器

var elements = document.getElementsByTagName('*')等價(jià)于jQuery("*")

• 分組選擇器

jQuery("selector1, selector2, selectorN")

3弃锐、結(jié)構(gòu)選擇器

結(jié)構(gòu)選擇器就是根據(jù)HTML文檔結(jié)構(gòu)中節(jié)點(diǎn)之間的包含或并列關(guān)系決定匹配元素的一種方法袄友，jQuery模仿CSS的關(guān)系過濾模式定義了4個(gè)關(guān)系選擇器，同時(shí)還根據(jù)包含關(guān)系霹菊，自定義了4個(gè)子元素選擇器剧蚣。

層級選擇器

層級選擇器能夠根據(jù)元素之間的結(jié)構(gòu)關(guān)系進(jìn)行匹配操作，主要包含選擇器旋廷、子選擇器鸠按、相鄰選擇器和兄弟選擇器：

子元素選擇器
子元素選擇器就是通過與當(dāng)前匹配元素選擇該元素包含的特定子元素启泣。子元素選擇器包含四種類型：

4纱耻、過濾選擇器

過濾選擇器主要通過特定的過濾表達(dá)式來篩選特殊需求的DOM元素，過濾選擇器的語法形式與CSS的偽類選擇器的語法格式相同险耀，即以冒號作為前綴標(biāo)識符弄喘。

定位過濾器
定位過濾器主要是根據(jù)編號和排位篩選特定位置上的元素，或者過濾掉特定元素甩牺。

內(nèi)容過濾器
內(nèi)容過濾器主要根據(jù)匹配元素所包含的子元素或者文本內(nèi)容進(jìn)行過濾

可見過濾器
可見過濾器就是根據(jù)元素的可見或者隱藏來進(jìn)行匹配的

5敌蚜、屬性選擇器

屬性選擇器主要根據(jù)元素的屬性及其屬性值作為過濾的條件，來匹配對應(yīng)的DOM元素窝爪。屬性選擇器都是以中括號作為起止分界符弛车，如[attribute]齐媒，與偽類選擇器特征都比較明顯，jQuery定義了7中屬性選擇器

6、表單選擇器

表單是頁面中使用頻率較高的元素之一谢肾，為了方便用戶靈活操作表單腕侄，jQuery專門定義了表單選擇器，使用表單選擇器可以方便獲取表單中某類表單域?qū)ο?/p>

基本表單選擇器
jQuery定義了一組偽類選擇器勒叠，利用他們可以獲取頁面中的表單類型元素

高級表單選擇器
jQuery根據(jù)表單域特有的特定定義了4個(gè)表單屬性選擇器柒桑，這些選擇器與基本表單選擇器不同弊决，它們可以選擇任何類型的表單域，因?yàn)樗饕鶕?jù)表單屬性來進(jìn)行選擇

7、jQuery選擇器優(yōu)化

正確使用選擇器引擎對于頁面性能起了至關(guān)重要的作用界逛。使用合適的選擇器表達(dá)式可以提高性能昆稿、增強(qiáng)語義并簡化邏輯。在傳統(tǒng)用法中息拜，最常用的是ID選擇器溉潭、類(Class)選擇器和類型選擇器，其中速度最快的是ID選擇器少欺，使用了JavaScript中的內(nèi)置函數(shù)getElementById()喳瓣。其次是類型選擇器，使用了JavaScript中的內(nèi)置函數(shù)getElementsByTagName()赞别。速度最慢的是Class選擇器畏陕，其需要通過解析HTML文檔樹，并且需要在瀏覽器內(nèi)核外遞歸仿滔，這種遞歸遍歷是無法被優(yōu)化的惠毁。

基于以上問題犹芹，在使用jQuery應(yīng)注意以下問題：

• 多用ID選擇器
• 少直接使用Class選擇器【洗拢可以使用復(fù)合選擇器羽莺，摒除表達(dá)式中的冗余部分，對于不必要的復(fù)合表達(dá)式進(jìn)行簡化
• 多用父子關(guān)系洞豁，少用嵌套關(guān)系盐固。如使用parent > child代替parent child
• 緩存jQuery對象

低效的用法：

for (i = 0; i < 100; i++) {
  var myList = $('.myList');
  myList.append(i);
}

使用下面的先緩存jQuery對象，則執(zhí)行效率會(huì)大大提高

var myList = $('.myList');
for (i = 0; i < 100; i++) {
  myList.append(i);
}

8丈挟、使用原生選擇器

Selectors API是由W3C發(fā)起指定的一個(gè)標(biāo)準(zhǔn)刁卜，致力于讓瀏覽器原生支持CSS查詢。DOM API模塊的核心是兩個(gè)方法：querySelector()和querySelectorAll()曙咽。這兩個(gè)方法能夠根據(jù)CSS選擇器規(guī)范蛔趴，便捷定位文檔中指定元素，前者返回的是一個(gè)元素對象例朱，后者返回的是一個(gè)元素集合孝情。

Document、DocumentFragment洒嗤、Element都實(shí)現(xiàn)了NodeSelector接口箫荡，即這三種類型的節(jié)點(diǎn)都擁有querySelector()和querySelectorAll()方法。