jQuery選擇器和選取方法

 

 

咱們已經使用了帶有簡單Css選擇器的jQuery選取函數:$()。如今是時候深刻了解jQuery選擇器語法，以及一些提取和擴充選中元素集的方法了。

　　1、jQuery選擇器

在CSS3選擇器標淮草案定義的選擇器語法中，jQuery支持至關完整的一套子集，同時還添加了一些非標準但頗有用的僞類。注意:本節講述的是 jQuery選擇器。其中有很多選擇器(但不是所有)能夠在CSS樣式表中使用。選擇器語法有三層結構。你確定已經見過選擇器中最簡單的形式。」#te st」選取id屬性爲」test」的元素。」blockquote」選取文檔中的全部<blockquote>元素，而」div.note」 則選取全部class屬性爲」note」的<blockquote>元素。簡單選擇器能夠組合成「組合選擇器」，好比 「div.note>p」和「blockquote i」，只要用組合字符作分隔符就行。簡單選擇器和組合選擇器還能夠分組成逗號分隔的列表。這種選擇器組是傳遞給$()函數最多見的形式。在解釋組合選擇器 和選擇器組以前，咱們必須先了解簡單選擇器的語法。

一、簡單選擇器

簡單選擇器的開頭部分(顯式或隱式地)是標籤類型聲明。例如，若是隻對<P>元素感興趣，簡單選擇器能夠用「P」開頭。若是選取的元素和標籤名無關，則可使用通配符「*」號來代替。若是選擇器沒有以標籤名或通配符開頭，則隱式含有一個通配符。

標籤名或通配符指定了備選文檔元素的一個初始集。在簡單選擇器中，標籤類型聲明以後的部分由零個或多個過濾器組成。過濾器從左到右應用，和書寫順序一致，其中每個都會縮小選中元素集。下表列舉了jQuery支持的過濾器。

jQuery選擇過濾器
過濾器	含義
#id	匹配id屬性爲id的元素。在有效的}ITML文檔中，永遠不會出現多個元素擁有相同的ID，所以該過濾器一般做爲獨立選擇器來使用
.class	匹配class屬性(是一串被解析成用空格分隔的單詞列表)含有class單詞的全部元素
[attr]	匹配擁有attr屬性(和值無關)的全部元素
[attr=val]	匹配擁有attr屬性且值爲val的全部元素
[attr!=val]	匹配沒有attr屬性、或attr屬性的值不爲val的全部元素((jQuery的擴展)
[attr^=val]	匹配attr屬性值以val開頭的元素
[attr$=val]	匹配attr屬性值以val結尾的元素
[attr*=val]	匹配attr屬性值含有val的元素
[attr~=val]	當其attr屬性解釋爲一個由空格分隔的單詞列表時，匹配其中包含單詞val的元素。所以選擇器「div.note」與「div [class~=note]」相同
[attr|=val]	匹配attr屬性值以val開頭且其後沒有其餘字符，或其餘字符是以連字符開頭的元素
:animated	匹配正在動畫中的元素，該動畫是由jQuery產生的
:button	匹配<button type=」button」>和<input type=」button」>元素(jQuery的擴展)
:checkbox	匹配<input type=」checkbox」>元素( jQuery的擴展)，當顯式帶有input標籤前綴」input:checkbox」時，該過濾器更高效
:checked	匹配選中的input元素
:contains(text)	匹配含有指定text文本的元素(jQuery的擴展)。該過濾器中的圓括號肯定了文本的範圍—無須添加引號。被過濾的元素的文本是由textContent或innerText屬性來決定的—這是原始文檔文本，不帶標籤和註釋
:disabled	匹配禁用的元素
:empty	匹配沒有子節點、沒有文本內容的元素
:enabled	匹配沒有禁用的元素
:eq(n)	匹配基於文檔順序、序號從0開始的選中列表中的第n個元素(jQuery的擴展)
:even	匹配列表中偶數序號的元素。因爲第一個元素的序號是0，所以實際上選中的是第1個、第3個、第5個等元素(jQuery的擴展)
:file	匹配<input type=」file」>元素(jQuery的擴展)
:first	匹配列表中的第一個元素。和「:eq(0)」相同(jQuery的擴展)
:first-child	匹配的元素是其父節點的第一個子元素。注意:這與「:first」不一樣
:gt(n)	匹配基於文檔順序、序號從0開始的選中列表中序號大於n的元素( jQuery的擴展)
:has(sel)	匹配的元素擁有匹配內嵌選擇器sel的子孫元素
:header	匹配全部頭元素:<h1>, <h2>, <h3>, <h4>, <h5>或<h6> (jQuery的擴展)
:hidden	匹配全部在屏幕上不可見的元素:大致上能夠認爲這些元素的offsetWidth和offsetHeight爲0
:image	匹配<input type=」image」>元素。注意該過濾器不會匹配<img>元素( jQuery的擴展)
:input	匹配用戶輸入元素:<input>, <textarea>, <select>和<button>( jQuery的擴展)
:last	匹配選中列表中的最後一個元素(( jQuery的擴展)
:last-child	匹配的元素是其父節點的最後一個子元素。注意:這與「:last」不一樣
:lt(n)	匹配基於文檔順序、序號從0開始的選中列表中序號小於n的元素( jQuery的擴展)
:not(sel)	匹配的元素不匹配內嵌選擇器sel
:nth(n)	與「:eq(n)」相同(jQuery的擴展)
:nth-child(n)	匹配的元素是其父節點的第n個子元素。。能夠是數值、單詞even,單詞odd或計算公式。 使用「:nth-child(even)」來選取那些在其父節點的子元素中排行第2或第4等序號的元素。使用「:nth-child(odd)」來選取那 些在其父節點的子元素中排行第一、第3等序號的元素。 更常見的狀況是，n是xn或x n+y這種計算公式，其中x和y是整數，n是字面量n。所以能夠用nth-child(3n+1)來選取第1個、第4個、第7個等元素。 注意該過濾器的序號是從1開始的，所以若是一個元素是其父節點的第一個子元素，會認爲它是奇數元素，匹配的是3n+1，而不是3n。要和「:even以及「:odd」過濾器區分開來，後者匹配的序號是從0開始的。
:odd	匹配列表中奇數(從0開始)序號的元素。注意序號爲1和3的元素分別是第2個和第4個匹配元素( jQuery的擴展)
:only-child	匹配那些是其父節點惟一子節點的元素
:parent	匹配是父節點的元素，這與「:empty」相反(jQuery的擴展)
:password	匹配<input type=」password」>元素(jQuery的擴展)
:radio	匹配<input type=」radio」>元素( j Query的擴展)
:reset	匹配<input type=」reset」>和<button type=」reset」>元素(jQuery的擴展)
:selected	匹配選中的<option>元素。使用「:checked」來選取選中的複選框和單選框(jQuery的擴展)
:submit	匹配<input type=」submit」>和<button type=」submit」>元素(jQuery的擴展)
:text	匹配<input type=」text」>元素(jQuery的擴展)
:visible	匹配全部當前可見的元素:大致上能夠認爲這些元素的offsetWidth和offsetHeight的值不爲0，這和「:hidden」相反

注意:表中列舉的部分選擇器在圓括號中接受參數。例如，下面這個選擇器選取的元素在其父節點的子元素中排行第1或第2等，只要它們含有「JavaScript」單詞，就不包含元素。

p:nth-child(3n+1): text (JavaScript):not(:has(a))

一般來講，指定標籤類型前綴，可讓過濾器的運行更高效。例如，不要簡單使用」:radio」來選取單選框按鈕，使用「input:radio」會 更好。ID過濾器是個例外，不添加標籤前綴時它會更高效。例如，選擇器「#address」一般比更明確的「form#address」更高效。

二、組合選擇器

使用特殊操做符或「組合符」能夠將簡單選擇器組合起來，表達文檔樹中元素之間的關係。下表列舉了jQuery支持的組合選擇器。這些組合選擇器與CSS3支持的組合選擇器是同樣的。

下面是組合選擇器的一些例子:

1 2 3 4

"blockquote i"              //匹配<blockquote>裏的<i>元素 "ol > li"                   //<1i>元素是<of>的直接子元素 "#output+*"                 //id="output"元素後面的兄弟元素 "div.note > h1+p"           //緊跟<h1>的<P>元素，在<div class="note">裏面

注意組合選擇器並不限於組合兩個選擇器:組合三個甚至更多選擇器也是容許的。組合選擇器從左到右處理。

三、選擇器組

傳遞給$()函數(或在樣式表中使用)的選擇器就是選擇器組，這是一個逗號分隔的列表，由一個或多個簡單選擇器或組合選擇器構成。選擇器組匹配的元 素只要匹配該選擇器組中的任何一個選擇器就行。對咱們來講，一個簡單選擇器也能夠認爲是一個選擇器組。下面是選擇器組的一些例子:

1 2 3 4

"h1, h2,h3"             //匹配<h1>, <h2>和<h3>元素 "#p1, #p2, #p3"         //匹配id爲p1, p2或p3的元素 "div.note, p.note"      //匹配class="note"的<div>和<P>元素 "body>p,div.note>p"     //<body>和<div class="note">的<P>子元素

注意:CSS和jQuery選擇器語法容許在簡單選擇器的某些過濾器中使用圓括號，但並不容許使用圓括號來進行更常見的分組。例如，不能把選擇器組或組合選擇器放在圓括號中而且當成簡單選擇器:

1 2	(h1, h2, h3)+p          //非法 h1+p, h2+p, h3+p        //正確的寫法

　　2、選取方法

除了$()函數支持的選擇器語法，jQuery還定義了一些選取方法。本章中咱們已看到過的大部分jQuery方法都是在選中元素上執行某種操做。選取方法不同:它們會修改選中元素集，對其進行提取、擴充或僅做爲新選取操做的起點。

本節描述這些選取方法。你會注意到這些選取方法中的多數提供的功能與選擇器語法的功能是同樣的。

提取選中元素最簡單的方式是按位置提取。first()返回的jQuery對象僅包含選中元素中的第一個，last()返回的jQuery對象則只 包含最後一個元素。更通用的是，eq()方法返回物Query對象只包含指定序號的單個選中元素。(在jQuery 1.4中，負序號也是容許的，會從選區的末尾開始計數。)注意這些方法返回的jQuery對象只含有一個元素。這與常見的數組序號是不同的，數組序號返 回的單一元素沒有通過jQuery包裝:

1 2 3 4 5 6

var paras=$( "p" ); paras.first()           //僅選取第一個<p>元素 paras.last()            //僅選取最後一個<P> paras.eq(1)             //選取第二個<P> paras.eq(-2)           //選取倒數第二個<P> paras[1]                //第二個<P>元素自身

經過位置提取選區更通用的方法是slice()o jQuery的slice()方法與Array.slice()方法相似:前者接受開始和結束序號(負序號會從結尾處計算)，返回的jQuery對象包含 從開始到結束序號(但不包含結束序號)處的元素集。若是省略結束序號，返回的對象會包含從開始序號起的全部元素:

1 2	$( "p" ).slice(2,5)       //選取第3個、第4個和第5個<P>元素 $( "div" ).slice(-3)      //選取最後3個<div>元素

filter()是通用的選區過濾方法，有3種調用方式:

1. 　　傳遞選擇器字符串給filter()，它會返回一}jQuery對象，僅包含也匹配該選擇器的選中元素。
2. 　　傳遞另外一個jQuery對象給filter()，它會返回一個新的jQuery對象，該對象包含這兩們Query對象的交集。也能夠傳遞元素數組甚至單一文檔元素給filter()。
3. 　　傳遞判斷函數給filter()，會爲每個匹配元素調用該函數，filter()則返回一個jQuery對象，僅包含判斷函數爲true(或任意真值)的元素。在調用判斷函數時，this值爲當前元素，參數是元素序號。

   1 2 3

   $( "div" ).filter( ".note" )        //與$("div.note")同樣 $( "div" ).filter($( ".note" ))     //與$("div.note")同樣 $( "div" ).filter( function (idx){ return idx%2 == 0})         //與$("div:even")同樣

not()方法與filter()同樣，除了含義與filter()相反。若是傳遞選擇器字符串給not()它會返回一個新的jQuery對象，該 對象只包含不匹配該選擇器的元素。若是傳遞jQuery對象、元素數組或單一元素給not()，它會返回除了顯式排除的元素以外的全部選中元素。若是傳遞 判斷函數給not()，該判斷函數的調用就與在filter()中同樣，只是返回的jQuery對象僅包含那些使得判斷函數返回false或其餘假值的元 素:

1	$( "div" ).not( "#header, #footer" );        //除了兩個特殊元素以外的全部元素

　　在jQuery 1.4中，提取選區的另外一種方式是has()方法。若是傳入選擇器，has()會返回一個新的jQuery對象，僅包含有子孫元素匹配該選擇器的選中元素。若是傳入文檔元素給has()，它會將選中元素集調整爲那些是指定元素祖先節點的選中元素:

1	$( "p" ).has( "a[href]" )         //包含連接的段落

add()方法會擴充選區，而不是對其進行過濾或提取。能夠將傳給$()函數的任何參數(除了函數)照樣傳給add()方法。add()方法會返回 原來的選中元素，加上傳給$()函數的那些參數所選中(或建立)的那些元素。add()會移除重複元素，並對該組合選區進行排序，以便裏面的元素按照文檔 中的順序排列:

1 2 3 4 5 6

//選取全部<div>和全部<P>元素的等價方式 $( "div, p" )             //使用選擇器組 $( "div" ).add(p)         //給add()傳入選擇器 $( "div" ).add($( "p" ))    //給add()傳入jQuery對象 var paras = document.getElementsByTagName( "p" );       //類數組對象 $( "div" ).add(paras);        //給add()傳入元素數組

1.將選中元素集用作上下文

上面描述的filter(). add()、和not()方法會在各自的選中元素集上執行交集、並集和差集運算。jQuery還定義一些其餘選取方法可將當前選中元素集做爲上下文來使 用。對選中的每個元素，這些方法會使用該選中元素做爲上下文或起始點來獲得新的選中元素集，而後返回一個新的jQuery對象，包含全部新的選中元素的 並集。與add()方法相似，會移除重複元素並進行排序，以便元素會按照在文檔中出現的順序排列好。

該類別選取方法中最通用的是find()。它會在每個當前選中元素的子孫元素中尋找與指定選擇器字符串匹配的元素，而後它返回一個新的 jQuery對象來表明所匹配的子孫元素集。注意這些新選中的元素不會併入已存在的選中元素集中。同時注意find()和filter()不 同，filter()不會選中新元素，只是簡單地將當前選中的元素集進行縮減:

1	$( "div" ).find( "p" )            //在中查找元素，與$("div p")相同

該類別中的其餘方法返回新的jQuery對象，表明當前選中元素集中每個元素的子元素、兄弟元素或父元素。大部分都接受可選的選擇器字符串做爲參數。不傳入選擇器時，它們會返回全部子元素、兄弟元素或父元素。傳入選擇器時，它們會過濾元素集，僅返回匹配的。

children()方法返回每個選中元素的直接子元素，能夠用可選的選擇器參數進行過濾:

1 2 3

//尋找id爲"header"和"footer"元素的子節點元素中的全部<span>元素 //與$("#header>span, #footer>span")相同 $( "#header, #footer" ).children( "span" )

contents()方法與children()方法相似，不一樣的是它會返回每個元素的全部子節點，包括文本節點。若是選中元素集中 有<iframe>元素，contents()還會返回該<iframe>內容的文檔對象。注意contents()不接受可選 的選擇器字符串參數—由於它返回的文檔節點不徹底是元素，而選擇器字符串僅用來描述元素節點。
next()和prev()方法返回每個選中元素的下一個和上一個兄弟元素(若是有的話)。若是傳入了選擇器，會只選中匹配該選擇器的兄弟元素:

1 2	$( "h1" ).next( "p" )      //與$("h1+p")相同 $( "h1" ).prev()         //<h1>元素前面的兄弟元素

nextAll()和prevAll()返回每個選中元素前面或後面的全部兄弟元素(若是有的話)。siblings()方法則返回每個選中元素的全部兄弟元素(選中元素自己不是本身的兄弟元素)。若是給這些方法傳人選擇器，則只會返回匹配的兄弟元素:

1 2	$( "#footer" ).nextAll( "p" )       //緊跟#footer元素的全部<P>兄弟元素 $( "#footer" ).prevAll()          //#footer元素前面的全部兄弟元素

從jQuery 1.4開始，nextUntil()和prevUntil()方法接受一個選擇器參數，會選取選中元素後面或前面的全部兄弟元素，直到找到某個匹配該選擇 器的兄弟元素爲止。若是省略該選擇器，這兩個方法的做用就和不帶選擇器的nextAll()和prevAll()同樣。

parent()方法返回每個選中元素的父節點:

1	$( "li" ).parent()        //列表元素的父節點，好比<u1>和<ol>元素

parents()方法返回每個選中元素的祖先節點(向上直到元素)。parent()和parents()都接受一個可選的選擇器字符串參數:

1	$( "a[href]" ).parents( "p" )            //含有連接的<P>元素

parentsUntil()返回每個選中元素的祖先元素，直到出現匹配指定選擇器的第一個祖先元素。closest()方法必須傳人一個選擇器 字符串，會返回每個選中元素的祖先元素中匹配該選擇器的最近一個祖先元素(若是有的話)。對該方法而言，元素被認爲是自身的祖先元素。在jQuery 1.4中，還能夠給closest()傳入一個祖先元素做爲第二個參數，用來阻止jQuery往上查找時超越該指定元素:

1 2	$( "a[href]" ).closest( "div" )         //包含連接的最裏層<div> $( "a[href]" ).parentsUntil( ":not(div)" )      //全部包裹<a>的<div>元素

二、恢復到以前的選中元素集

爲了實現方法的鏈式調用，不少jQuery對象的方法最後都會返回調用對象。然而本節講述的方法都返回新的jQuery對象。能夠鏈式調用下去，但必須清晰地意識到，在鏈式調用的後面所操做的元素集，可能已經不是該鏈式調用開始時的元素集了。

實際狀況還要複雜些。當這裏所描述的選取方法在建立或返回一個新的ejQuery對象時，它們會給該對象添加一個到它派生自的舊jQuery對象的 內部引用。這會建立一個jQuery對象的鏈式表或棧。end()方法用來彈出棧，返回保存的jQuery對象。在鏈式調用中調用end()會將匹配元素 集還原到以前的狀態。考慮如下代碼:

1 2 3 4 5 6 7 8 9 10 11 12

//尋找全部<div>元素，而後在其中尋找<P>元素 //高亮顯示<P>元素，而後給<div>元素添加一個邊框 //首先，不使用鏈式調用 var divs = $( "div" ); var paras = div.find( "p" ); paras.addClass( "highlight" ); divs.css( "border" , "solid black 1px" );   //下面展示如何使用鏈式調用來實現 $( "div" ).find( "p" ).addClass( "highlight" ).end().css( "border" , "solid black 1px" ); //還能夠將操做調換順序來避免調用end() $( "div" ).css( "border" , "solid block 1px" ).find( "p" ).addClass( "highlight" );

若是想手動定義選中元素集，同時保持與end()方法的兼容，能夠將新的元素集做爲數組或類數組對象傳遞給push5tack()方法。指定的元素會成爲新的選中元素，以前選中的元素集則會壓入棧中，以後能夠用end()方法還原它們:

1 2 3

var sel = $( "div" );             //選取全部<div>元素 sel.pushStack(document.getElementsByTagName( "p" ));      //修改成全部<P>元素 sel.end();                      //還原爲<div>元素

既然咱們已經講解了end()方法及其使用的選區棧，就有最後一個方法須要講解。andSelf()返回一個新的jQuery對象，包含當前的全部 選中元素，加上以前的全部選中元素(會去除重複的)。andSelf()和add()方法同樣，或許「addPrev」是一個更具描述性的名字。做爲例 子，考慮上面代碼的下述變化:高亮顯示<P>元素及其父節點中的<div>元素，而後給這些<div>元素添加邊 框:

1 2 3 4

$( "div" ).find( "p" ).andSelf().           //尋找<div》中的<P>，合併起來 addClass( "highlight" ).              //都高亮 end().end().                            //彈出棧兩次，返回$("div") css( "border" , "solid black 1px" );       //給divs添加邊框