jQuery選擇器使得獲得頁面元素變得更加容易、更加靈活，從而大大減輕了開發人員的壓力。如同蓋樓一樣，沒有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見,jQuery選擇器的重要性。當然想一下子掌握所有選擇器也是很困難的，這個得靠實踐和積累
選擇器並沒有一個固定的定義，在某種程度上說，jQuery的選擇器和樣式表中的選擇器十分相似。選擇器具有如下特點： 1．簡化代碼的編寫 2．隱式迭代 3．無須判斷對象是否存在 其中“$”是選擇器不可缺少的部分，在jQuery庫中，$就是jQuery的一個簡寫形式，比如$("#foo")和jQuery("#foo")是等價的，$.ajax和jQuery.ajax是等價的。如果沒有特別說明，可以把程序中的$符號都理解為jQuery的簡寫形式。 現在我們正式進入jQuery選擇器的學習。根據選擇器的功能習慣將選擇器進行分類，下面將不同類型的分類器進行分類，並且分別進行解釋說明，使讀者達到掌握程度。 一、基本選擇器 基本選擇器包括5種選擇器：#id、element、.class、*和selectorl,selector2.selectorN，下面將配合實例分別介紹每種選擇器的作用及使用方法。 1．#id選擇器 #id選擇器根據給定的ID匹配一個元素。如果選擇器中包含特殊字符，可以用兩個斜槓轉義，其返回值為Array<Element>。 2．element選擇器 element選擇器是一個用於搜索的元素。指向DOM節點的標簽名。其返回值為Array<Element(s)>。 3．class選擇器 .class選擇器根據給定的類匹配元素，是一個用以搜索的類。一個元素可以有多個類，只要有一個符合就能被匹配到，其返回值為Array<Element(s)>。 舉例： 代碼如下: <input type="text" id="ID" value="根據ID選擇" /> <a>根據元素名稱選擇</a> <input type="text" class="classname" value="根據元素css類名選擇" /> jQuery("#ID").val(); jQuery("a").text(); jQuery(".classname").val(); 即可分別得到元素的值。以上三種為最常見的選擇器，其中ID選擇器是效率最高的，在可能的情況下應該盡量使用它。 4．*選擇器 *選擇器多用於結合上下文來搜索，匹配所有元素的選擇器。其返回值為Array<Element(s)>。 5．selector1,selector2,selectorN選擇器 這類選擇器選擇器即將每一個選擇器匹配到的元素合並後一起返回。你可以指定任意多個選擇器，並將匹配到的元素合並到一個結果內，其返回值為：Array<Element(s)>。在下例中通過對選擇的項進行CSS操作來使讀者清晰地了解selector1,selector2,selectorN選擇器的作用。 二、層級選擇器 層級選擇器包括5種形式：ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合實例分別詳細介紹每種選擇器的作用及使用方法。 1．ancestor descendant選擇器 其指在給定的祖先元素下匹配所有的後代元素，作為參數的ancestor代表任何有效的選擇器，而descendant則用以匹配元素的選擇器，並且它是第一個選擇器的後代。其返回值為：Array<Element(s)>。 2．parent>child選擇器 parent>child選擇器代表在給定的父元素下匹配所有的子元素。兩個參數分別代表的意思如下：parent代表任何有效選擇器；child用以匹配元素的選擇器，並且它是第一個選擇器的子元素。其返回值為Array<Element(s)>。 3．prev+next選擇器 這類選擇器的作用是匹配所有緊接在prev元素後的next元素。兩個參數分別代表的意思如下：prev代表任何有效選擇器；next代表一個有效選擇器並且緊接著第一個選擇器。其返回值為Array<Element(s)>。 4．prev ~ siblings選擇器 prev ~ siblings選擇器代表匹配prev元素之後的所有siblings元素。兩個參數分別代表的意思如下：prev代表任何有效選擇器；siblings代表一個選擇器，並且它作為第一個選擇器的同輩。其返回值為Array<Element(s)>。 舉例： 代碼如下: <div id="divTest"> <input type="text" value="投資" /> <input id="next" type="text" /> <input type="text" value="擔當" /> <input type="text" title="學習" value="學習" /> <a>1</a> <a>2</a> </div> //得到div中的a標簽內容 結果為12 jQuery("#divTest a").text(); //輸出div直接子節點 結果為投資 jQuery("#divTest>input").val(); //輸出id為next的後一個同級別元素 結果為擔當 jQuery("#next+input").val(); //同上，並且是有title的元素 結果為學習 jQuery("#next~[title]").val(); 三、過濾選擇器 過濾選擇器主要通過特定的過濾規則來篩選出所需要的DOM元素，過濾規則與CSS中的偽類選擇器語法相同，即選擇器都以一個冒號開頭。 過濾選擇器涉及的內容較多，總共有6 種類型，但是其可以進行歸類。下面我們將對各種類型的選擇器進行詳細講解。 1．基本過濾選擇器 基本過濾選擇器是過濾選擇器中最常用的一種，其主要包括以下幾種形式，在此做詳細說明： （1）:first/:last選擇器。 （2）:not選擇器。 （3）:even和:odd選擇器。 （4）:eq:gt、:lt、選擇器。 （5）:header選擇器。 （6）:animated選擇器。 舉例： 代碼如下: <div id="divTest"> <ul> <li>投資</li> <li>理財</li> <li>成熟</li> <li>擔當</li> <input type="radio" value="學習" checked="checked" /> <input type="radio" value="不學習" /> </ul> </div> //第一個li內容 結果為投資 jQuery("li:first").text(); //最後一個li內容 結果為擔當 jQuery("li:last").text(); //input未被選中的值 結果為不學習 jQuery("li input:not(:checked)").val(); //索引為偶數的li 結果為投資 成熟 jQuery("li:even").text(); //索引為奇數的li 結果為理財 擔當 jQuery("li:odd").text(); //索引大於2的li的內容 結果為擔當 jQuery("li:gt(2)").text(); //索引小於1的li的內容 結果為投資 jQuery("li:lt(1)").text(); 2.內容過濾選擇器 內容過濾選擇器主要包括:contains、:empty、:has、:parent 4種過濾器，這部分過濾器是對上面介紹基本過濾選擇器的一個補充，對於頁面選取、設置元素顯示等方面發揮著重要的作用。下面將對各選擇器進行詳細的介紹。 （1）:contains選擇器。 （2）:empty選擇器。 （3）:has選擇器。 （4）:parent選擇器。 舉例： 代碼如下: <div id="Test"> <ul> <li>hyip投資</li> <li>hyip</li> <li></li> <li>理財</li> <li><a>投資</a></li> </ul> </div> //包含hyip的li的內容 結果為hyip投資 hyip jQuery("li:contains('hyip')").text(); //內容為空的li的後一個li內容 結果為理財 jQuery("li:empty+li").text(); //包含a標簽的li的內容 結果為投資 jQuery("li:has(a)").text(); 3．可見性過濾選擇器 可見性過濾選擇器比較簡單，其包含兩種選擇器，主要是用來匹配所有可見元素和不可見元素。下面將會對這兩種選擇器進行詳細介紹。 （1）:hidden選擇器。 （2）:visible選擇器。 舉例： 代碼如下: <ul> <li>可見</li> <li style="display:none;">不可見</li> </ul> //不可見的li的內容 結果為不可見 jQuery("li:hidden").text(); //可見的li的內容 結果為可見 jQuery("li:visible").text(); 4．屬性過濾選擇器 屬性過濾選擇器是用於匹配包含給定屬性的元素，當然也可以匹配不包含此屬性的元素等。屬性過濾選擇器共含有以下7種選擇器。 （1） [attribute]選擇器。 （2）[attribute=value]、[attribute!=value]選擇器（此處包含兩種）。 （3）[attribute^=value]、[attribute$=value]、[attribute*=value]選擇器（此處包含三種）。 （4）[selector][selector2]選擇器。 舉例： 代碼如下: <input type="text" name="hyipinvest" value="hyip投資" /> <input type="text" name="investhyip" value="投資hyip" /> <input type="text" name="google" value="HYIP" /> //name為hyipinvest的值 結果為hyip投資 alert(jQuery("input[name='hyipinvest']").val()); //name以hyip開始的值 結果為hyip投資 alert(jQuery("input[name^='hyip']").val()); //name以hyip結束的值 結果為投資hyip alert(jQuery("input[name$='hyip']").val()); //name包含oo的值 結果為HYIP alert(jQuery("input[name*='oo']").val()); 5．子元素過濾選擇器 html由層層嵌套在一起的標簽組成，由於一些標簽需要進行單獨處理，如何選取一個或者一些特定的嵌套標簽在程序中就成為了一個問題。jQuery提供了子元素過濾選擇器解決了這個問題。它包括4個選擇器，具體內容將在下面詳細講解。 （1）:nth-child選擇器。 （2）:first-child、:last-child選擇器（兩種）。 （3）:only-child選擇器。 6．表單對象屬性過濾選擇器 這部分內容相當簡單，只包含四種類型的選擇器，這些選擇器分別用來匹配可用元素或者不可用元素、選中元素等。下面將以實例的形式對此部分內容進行講解。 （1）:enabled、:disabled選擇器。 （2）:checked選擇器。 （3）:selected選擇器。 表單過濾選擇器是用於處理html中表單的選擇器，其中不僅僅包括經常用到的按鈕、文本域、單選框、復選框等，還涉及了很少用到的圖片、隱藏域、文件上傳等標簽。下面將會對這些選擇器進行具體介紹。 （1）:input選擇器。 （2）:text、:password選擇器。 （3）:radio、:checkbox選擇器。 （4）:submit、:image、:reset、:button、:file選擇器。 （5）:hidden選擇器。 Query選擇器就總結到這裡，這些基本上都是在學習過程中遇到的，還有極少部分沒有總結出來。經過一段時間實踐，相信大家就能夠熟練的使用jQuery選擇器了。