jquery選擇器大全 全面詳解jquery選擇器_jquery
- WBOY原創
- 2016-05-16 16:56:391393瀏覽
選擇器並沒有一個固定的定義，在某種程度上說，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
2． element選擇器
element選擇器是一個用來搜尋的元素。指向DOM節點的標籤名。其傳回值為Array
3． class選擇器
.class選擇器根據給定的類別來匹配元素，是一個用以搜尋的類別。一個元素可以有多個類，只要有一個符合就能被匹配到，其回傳值為Array
舉例：
程式碼如下:
程式碼如下:
程式碼如下:依元素名稱選擇 舉例：
jQuery("#ID").val();
jQuery("a").text();jQuery(".classname") .val();
即可分別得到元素的值。以上三種為最常見的選擇器，其中ID選擇器是效率最高的，在可能的情況下應該盡量使用它。
4． *選擇器
*選擇器多用於結合上下文來搜索，匹配所有元素的選擇器。其傳回值為Array
這類選擇器選擇器即將每個選擇器符合到的元素合併後一起回傳。你可以指定任多個選擇器，並將符合的元素合併到一個結果內，其傳回值為：Array
層級選擇器包含5種形式：ancestor、descendant、parent > child、prev next和prev ~ siblings。以下配合實例分別詳細介紹每種選擇器的作用及使用方法。
1． ancestor descendant選擇器
其指在給定的祖先元素下匹配所有的後代元素，作為參數的ancestor代表任何有效的選擇器，而descendant則用以匹配元素的選擇器，並且它是第一個選擇器的後代。其傳回值為：Array
parent>child選擇器代表在給定的父元素下匹配所有的子元素。兩個參數分別代表的意思如下：parent代表任何有效選擇器；child用以符合元素的選擇器，並且它是第一個選擇器的子元素。其傳回值為Array
3． prev next選擇器
這類選擇器的作用是匹配所有緊接在prev元素後的next元素。兩個參數分別代表的意思如下：prev代表任何有效選擇器；next代表一個有效選擇器並且緊接著第一個選擇器。其傳回值為Array
>
//輸出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選擇器。
舉例：
//第一個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選擇器。
（4）:parent選擇器。
舉例：
複製程式碼
程式碼如下:
//包含hyip的li的內容結果為hyiphyip
jQuery("li:contains('hyip')").text();
//內容為空的li的後一個li內容結果為理財
jQuery("li:empty li") .text();
//包含a標籤的li的內容結果為投資
jQuery("li:has(a)").text();
3．可見性過濾選擇器
可見性過濾選擇器比較簡單，其包含兩種選擇器，主要是用來匹配所有可見元素和不可見元素。以下將會對這兩種選擇器進行詳細介紹。
（1）:hidden選擇器。
（2）:visible選擇器。
可見
//不可見的li的內容結果為不可見
jQuery("li:hidden").text();
//可見的li的內容結果為可見
jQuery("li:visible").text();
屬性過濾選擇器是用於匹配包含給定屬性的元素，當然也可以匹配不包含此屬性的元素等。屬性過濾選擇器共含有以下7種選擇器。 （1） [attribute]選擇器。
（2）[attribute=value]、[attribute!=value]選擇器（此處包含兩種）。
（3）[attribute^=value]、[attribute$=value]、[attribute*=value]選擇器（此處包含三種）。
（4）[selector][selector2]選擇器。
舉例：
//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());
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選擇器了。