雖然jQuery上手簡單，相比于其他庫學習起來較為簡單，但是要全面掌握，卻不輕松。因為它涉及到網頁開發的方方面面，提供的方法和內部變化有上千種之多。初學者常常感到，入門很方便，提高很困難。本文的目標是將jQuery選擇器做一個系統的梳理，試圖理清jQuery的設計思想，找出學習的脈絡，使讀者從入門到精通。
jQuery是什么
簡單的說，jQuery是一個JavaScript框架，它的宗旨是：寫更少的代碼，做更多的事情。對于Web開發人員而言，jQuery是一個功能強大的JavaScript庫，能更加快速開發相關應用，例如AJAX交互，JavaScript動畫效果等。對于Web設計師而言，jQuery封裝了Javascript源碼細節，實現了與HTML標簽的有效分離，便于設計師更加專注于Web頁面設計效果?；诖耍W頁的用戶體驗大大增強，包括網頁的交互性，視覺效果等等。
jQuery的核心設計思想是：選擇某個網頁元素，然后對其進行某種操作。那么如何選擇、定位某個網頁元素呢?對于JavaScript開發人員而言，通常的一種手段是document.getElementById()。而在jQuery語法中，使用的是美元符號“$”，等價的選擇表達式寫法為：
var someElement = $("#myId");
jQuery之所以稱之為“jQuery”，主要就是因為它強大的選擇器，也就是Javascript Query的意思。下面，我們具體介紹jQuery選擇器相關的設計思想：
一、jQuery基本選擇器
前面提到，選擇器是jQuery的特色。jQuery的基本選擇器主要分為tb以下五種類型：
1. $(“#myId”) // 選擇ID為myId的網頁元素
2. $(“標簽名”) // 例如$(“div”)獲取的就是HTML文檔中的所有的div元素的jQuery對象集合
3. $(“.myClass”) // 獲取的是HTML文檔中所有的class為“myClass”的元素集合
4. $(“*”) // 這個獲取的是HTML文檔中的所有的元素
5. $(“selector1,selector2,selector3…selectorN “) // 這種選擇器叫做組選擇器。例如：$(“span,#two”)
// 選取所有的span標簽元素和id=two的元素。
二、jQuery層次選擇器
無論何時，通過jQuery選擇器獲取的jQuery對象任何時候都是一組元素。jQuery的層次選擇器主要分為以下兩種類型：
1. $(“ancestor descendant”)：選取parent元素后所有的child元素。ancestor的中文意思是“祖先”，descendant的中文意思是“后代”。例如：
$(“body div”) 選取body元素下所有的div元素。
$(“div#test div”) 選取id為“test”的div所包含的所有的div子元素
2. $(“parent > child”)：選取parent元素后所有的第一個child元素。例如：
$(“body > div”) 選取body元素下所有的第一級div元素。
$(“div#test > div”) 選取id為“test”的div所包含的所有的第一級div子元素
三、jQuery過濾選擇器
jQuery最基本過濾選擇器包括：
1. :first // 選取第一個元素。$(“div:first”)選取所有div元素中的第一個div元素
2. :last // 選取最后一個元素。$(“div:last”)選取所有div元素中的最后一個div元素
3. :even // 選取索引是偶數的所有元素。$(“input:even”)選取索引是偶數的input元素。
4. :odd // 選取索引是奇數的所有元素。$(“input:odd”)選取索引是奇數的input元素。
5. :eq(index) // 選取索引等于index的元素。$(“input:eq(1)”)選取索引等于1的input元素。
6. :gt(index) // 選取索引大于index的元素。$(“input:gt(1)”)選取索引大于1的input元素。
7. :lt(index) // 選取索引小于index的元素。$(“input:lt(3)”)選取索引小于3的input元素。
jQuery內容過濾選擇器，可以輕松地對DOM文檔中的文本內容進行篩選，從而準確地選取我們所需要的元素。
1. :contains(text) // 選取含有文本內容為“text”元素。$(“div:contains(‘你’)”)選取含有文本“你”的div元素。
2. :empty // 選取不包含子元素和文本的空元素。$(“div:empty”)選取不包含子元素(包括文本元素)的div空元素。
3. :parent // 選取含有子元素或者文本的元素。$(“div:parent”)選取擁有子元素(包括文本元素)的div元素。
可以看見，jQuery內容過濾選擇器的過濾規則主要體現在它所包含的子元素或文本內容上。
jQuery可見性過濾選擇器的用法如下：
1. :hidden // 選取所有不可見的元素。$(“:hidden”)選取網頁中所有不可見的元素。
2. :visible // 選取所有可見元素。$(“div:visible”)選取所有可見的div元素。
jQuery屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
1. [attribute] // 選擇擁有此屬性的元素。$(“div[id]“)選取擁有屬性id的元素。
2. [attribute=value] // 選取屬性值為value的元素。$(“div[name=test]“)選取屬性name的值為“test”的div元素。
3. [attribute!value] // 選取屬性值不等于value的元素。
4.[attribute^=value] // 選取屬性的值以value開始的元素。
5. [attribute$=value] // 選取屬性的值以value為結束的元素。
6. [attribute*=value] // 選取屬性的值含有value的元素。
7. [selector1] [selector2] [selectorN] //復合屬性選擇器。$(“div[id][name*=test]“)選取擁有屬性id，且屬性name的值含有“test”的div元素
jQuery子元素過濾選擇器的過濾規則相對于其它的選擇器稍微有些復雜。
1. :nth-child(index/even/odd/equation) // 選取每個父元素下的第index個子元素或者奇偶元素。
2. :first-child // 選取每個父元素的第一個子元素
3. :last-child // 選取每個父元素的最后一個子元素
jQuery表單對象屬性過濾選擇器主要是對所選擇的表單元素進行過濾，例如選擇不可用的表單元素、被選中的下拉框、多選框等等。
1. :enabled // 選取所有可用的表單元素。$(“#form1 :enabled”)選取id為“form1”的表單內的所有可用元素。
2. :disabled // 選取所有不可用的表單元素。
3. :checked // 選取所有被選中的元素。$(“input:checked”)選取所有被選中的元素。
4. :selected // 選取所有被選中的選項元素。$(“select :selected”)選取所有被選中的選項元素(option)。
jQuery中引入了表單選擇器，讓我們能極其方便地獲取到一個表單中的某個或某類型的元素。