jQuery選擇器這一塊，我大致用下面這張圖片進(jìn)行了歸納，分為兩個(gè)塊，一塊是jQuery選擇器的優(yōu)勢，另外一塊，重點(diǎn)就是，jQuery選擇器的分類。

jQuery選擇器.png

• 首先在講到優(yōu)勢中的第三點(diǎn)時(shí)，為什么說jQuery選擇器有完善的處理機(jī)制呢？因?yàn)椋谠膉s中，會(huì)遇到一下問題，

<div>test</div>
<script type="type/javascript">
   document.getElementById("tt").style.color = "red";
</script>

運(yùn)行上面的代碼，瀏覽器會(huì)報(bào)錯(cuò)，因?yàn)榫W(wǎng)頁中沒有id為“tt”的元素。
但是，我們使用jQuery獲取網(wǎng)頁中不存在的元素也不會(huì)報(bào)錯(cuò)，這個(gè)時(shí)候，就需要注意另外一個(gè)問題：當(dāng)要用jQuery檢查某個(gè)元素在網(wǎng)頁上是否存在時(shí)，就不能使用以下代碼：

if($("#tt")) {
//do something
}

而應(yīng)該根據(jù)獲取到元素的長度來判斷，代碼如下：

if($("#tt").length > 0) {
//do something
}

或者轉(zhuǎn)化成DOM對象來判斷，代碼如下：

if($("#tt")[0]) {
//do something
}

基本選擇器又分以下幾種:

基本選擇器.png

層次選擇器又分以下幾種:

層次選擇器.png

• 需要注意的第一點(diǎn)是，$("ancestor descendant")與$("parent>child")的區(qū)別：一個(gè)是獲得所有后代元素，一個(gè)是獲得子元素；
• 第1個(gè)和第2個(gè)選擇器比較常用，而后兩個(gè)因?yàn)樵趈Query中可以用更加簡單的方法代替，所以很少用，可以使用next()方法代替$("prev+next")選擇器，可以用nextAll()代替$("prev~siblings")選擇器；
• 最后一點(diǎn)是，siblings()方法與$("prev~siblings")選擇器的區(qū)別是，siblings()方法與前后位置無關(guān)，只要是同輩節(jié)點(diǎn)就能匹配。

過濾選擇器又分以下幾種:

過濾選擇器.png

其中基本過濾選擇器又分以下幾種:

基本過濾選擇器.png

內(nèi)容過濾選擇器又分以下幾種:

內(nèi)容過濾選擇器.png

屬性過濾選擇器分以下幾種:

屬性過濾選擇器.png

子元素過濾選擇器

子元素過濾選擇器.png

表單對象屬性過濾選擇器

表單對象屬性過濾選擇器.png

表單選擇器

表單選擇器.png