JavaScript框架：jQuery選擇器精通教程

雖然jQuery上手簡單，相較於其他函式庫學習起來較為簡單，但是要全面掌握，卻不輕鬆。因為它牽涉到網頁開發的方方面面，提供的方法和內部變化有數千種之多。初學者常常感到，入門很方便，進步很困難。本文的目標是將jQuery選擇器做一個系統的梳理，試圖理清jQuery的設計思想，找出學習的脈絡，使讀者從入門到精通。
　　jQuery是什麼

　　簡單的說，jQuery是一個JavaScript框架，它的宗旨是：寫更少的程式碼，做更多的事情。對於Web開發人員而言，jQuery是一個功能強大的JavaScript函式庫，能更快速地開發相關應用，例如AJAX交互，JavaScript動畫效果等。對於Web設計師而言，jQuery封裝了Javascript原始碼細節，實現了與HTML標籤的有效分離，讓設計師更專注於Web頁面設計效果。基於此，網頁的使用者體驗大大增強，包括網頁的互動性，視覺效果等等。

　　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 // 選取每個父元素的最後一個子元素

　化物件主要是將所選的表單元素進行篩選，例如選擇不可用的表單元素、被選取的下拉方塊、多重選取方塊等等。

　　1. :enabled // 選取所有可用的表單元素。 $(“#form1 :enabled”)選取id為「form1」的表單內的所有可用元素。

　　2. :disabled // 選取所有無法使用的表單元素。

　　3. :checked // 選取所有已選取的元素。 $(“input:checked”)選取所有已選取的元素。

　　4. :selected // 選取所有已選取的選項元素。 $(“select :selected”)選取所有被選取的選項元素(option)。

　　jQuery中引入了表單選擇器，讓我們能極其方便地獲取到一個表單中的某個或某類型的元