jquery選擇器大全 全面詳解jquery選擇器

NO IMAGE

選擇器並沒有一個固定的定義,在某種程度上說,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選擇器了。

您可能感興趣的文章:

JQuery 中幾個類選擇器的簡單使用介紹jQuery類選擇器用法例項使用jquery選擇器如何獲取父級元素、同級元素、子元素jquery選擇器之屬性過濾選擇器詳解jquery 中多條件選擇器,相對選擇器,層次選擇器的區別jQuery Selector選擇器小結Jquery選擇器中使用變數實現動態選擇例子JQuery中$之選擇器用法介紹Jquery顏色選擇器ColorPicker實現程式碼jQuery過濾選擇器:not()方法使用介紹jquery 屬性選擇器(匹配具有指定屬性的元素)jQuery中的類名選擇器(.class)用法簡單示例