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

　　jQuery表單對象屬性過濾選取器主要是對所選擇的表單元素進行過濾，例如選擇停用表單元素、被選中的下拉框、多選框等等。

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

　　2. :disabled // 選取所有停用表單元素。

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

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

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

作者：tbwshc