jQuery选择器和选取方法
我們已經(jīng)使用了帶有簡(jiǎn)單Css選擇器的jQuery選取函數(shù):$()。現(xiàn)在是時(shí)候深入了解jQuery選擇器語(yǔ)法，以及一些提取和擴(kuò)充選中元素集的方法了。
一、jQuery選擇器
在CSS3選擇器標(biāo)淮草案定義的選擇器語(yǔ)法中，jQuery支持相當(dāng)完整的一套子集，同時(shí)還添加了一些非標(biāo)準(zhǔn)但很有用的偽類(lèi)。注意:本節(jié)講述的是 jQuery選擇器。其中有不少選擇器(但不是全部)可以在CSS樣式表中使用。選擇器語(yǔ)法有三層結(jié)構(gòu)。你肯定已經(jīng)見(jiàn)過(guò)選擇器中最簡(jiǎn)單的形式。”#te st”選取id屬性為”test”的元素。”blockquote”選取文檔中的所有<blockquote>元素，而”div.note” 則選取所有class屬性為”note”的<blockquote>元素。簡(jiǎn)單選擇器可以組合成“組合選擇器”，比如 “div.note>p”和“blockquote i”，只要用組合字符做分隔符就行。簡(jiǎn)單選擇器和組合選擇器還可以分組成逗號(hào)分隔的列表。這種選擇器組是傳遞給$()函數(shù)最常見(jiàn)的形式。在解釋組合選擇器 和選擇器組之前，我們必須先了解簡(jiǎn)單選擇器的語(yǔ)法。
1、簡(jiǎn)單選擇器
簡(jiǎn)單選擇器的開(kāi)頭部分(顯式或隱式地)是標(biāo)簽類(lèi)型聲明。例如，如果只對(duì)<P>元素感興趣，簡(jiǎn)單選擇器可以用“P”開(kāi)頭。如果選取的元素和標(biāo)簽名無(wú)關(guān)，則可以使用通配符“*”號(hào)來(lái)代替。如果選擇器沒(méi)有以標(biāo)簽名或通配符開(kāi)頭，則隱式含有一個(gè)通配符。
標(biāo)簽名或通配符指定了備選文檔元素的一個(gè)初始集。在簡(jiǎn)單選擇器中，標(biāo)簽類(lèi)型聲明之后的部分由零個(gè)或多個(gè)過(guò)濾器組成。過(guò)濾器從左到右應(yīng)用，和書(shū)寫(xiě)順序一致，其中每一個(gè)都會(huì)縮小選中元素集。下表列舉了jQuery支持的過(guò)濾器。
| jQuery選擇過(guò)濾器 | |
| 過(guò)濾器 | 含義 |
| #id | 匹配id屬性為id的元素。在有效的}ITML文檔中，永遠(yuǎn)不會(huì)出現(xiàn)多個(gè)元素?fù)碛邢嗤腎D，因此該過(guò)濾器通常作為獨(dú)立選擇器來(lái)使用 |
| .class | 匹配class屬性(是一串被解析成用空格分隔的單詞列表)含有class單詞的所有元素 |
| [attr] | 匹配擁有attr屬性(和值無(wú)關(guān))的所有元素 |
| [attr=val] | 匹配擁有attr屬性且值為val的所有元素 |
| [attr!=val] | 匹配沒(méi)有attr屬性、或attr屬性的值不為val的所有元素((jQuery的擴(kuò)展) |
| [attr^=val] | 匹配attr屬性值以val開(kāi)頭的元素 |
| [attr$=val] | 匹配attr屬性值以val結(jié)尾的元素 |
| [attr*=val] | 匹配attr屬性值含有val的元素 |
| [attr~=val] | 當(dāng)其attr屬性解釋為一個(gè)由空格分隔的單詞列表時(shí)，匹配其中包含單詞val的元素。因此選擇器“div.note”與“div?[class~=note]”相同 |
| [attr|=val] | 匹配attr屬性值以val開(kāi)頭且其后沒(méi)有其他字符，或其他字符是以連字符開(kāi)頭的元素 |
| :animated | 匹配正在動(dòng)畫(huà)中的元素，該動(dòng)畫(huà)是由jQuery產(chǎn)生的 |
| :button | 匹配<button?type=”button”>和<input?type=”button”>元素(jQuery的擴(kuò)展) |
| :checkbox | 匹配<input?type=”checkbox”>元素(?jQuery的擴(kuò)展)，當(dāng)顯式帶有input標(biāo)簽前綴”input:checkbox”時(shí)，該過(guò)濾器更高效 |
| :checked | 匹配選中的input元素 |
| :contains(text) | 匹配含有指定text文本的元素(jQuery的擴(kuò)展)。該過(guò)濾器中的圓括號(hào)確定了文本的范圍—無(wú)須添加引號(hào)。被過(guò)濾的元素的文本是由textContent或innerText屬性來(lái)決定的—這是原始文檔文本，不帶標(biāo)簽和注釋 |
| :disabled | 匹配禁用的元素 |
| :empty | 匹配沒(méi)有子節(jié)點(diǎn)、沒(méi)有文本內(nèi)容的元素 |
| :enabled | 匹配沒(méi)有禁用的元素 |
| :eq(n) | 匹配基于文檔順序、序號(hào)從0開(kāi)始的選中列表中的第n個(gè)元素(jQuery的擴(kuò)展) |
| :even | 匹配列表中偶數(shù)序號(hào)的元素。由于第一個(gè)元素的序號(hào)是0，因此實(shí)際上選中的是第1個(gè)、第3個(gè)、第5個(gè)等元素(jQuery的擴(kuò)展) |
| :file | 匹配<input?type=”file”>元素(jQuery的擴(kuò)展) |
| :first | 匹配列表中的第一個(gè)元素。和“:eq(0)”相同(jQuery的擴(kuò)展) |
| :first-child | 匹配的元素是其父節(jié)點(diǎn)的第一個(gè)子元素。注意:這與“:first”不同 |
| :gt(n) | 匹配基于文檔順序、序號(hào)從0開(kāi)始的選中列表中序號(hào)大于n的元素(?jQuery的擴(kuò)展) |
| :has(sel) | 匹配的元素?fù)碛衅ヅ鋬?nèi)嵌選擇器sel的子孫元素 |
| :header | 匹配所有頭元素:<h1>,?<h2>,?<h3>,?<h4>,?<h5>或<h6>?(jQuery的擴(kuò)展) |
| :hidden | 匹配所有在屏幕上不可見(jiàn)的元素:大體上可以認(rèn)為這些元素的offsetWidth和offsetHeight為0 |
| :image | 匹配<input?type=”image”>元素。注意該過(guò)濾器不會(huì)匹配<img>元素(?jQuery的擴(kuò)展) |
| :input | 匹配用戶(hù)輸入元素:<input>,?<textarea>,?<select>和<button>(?jQuery的擴(kuò)展) |
| :last | 匹配選中列表中的最后一個(gè)元素((?jQuery的擴(kuò)展) |
| :last-child | 匹配的元素是其父節(jié)點(diǎn)的最后一個(gè)子元素。注意:這與“:last”不同 |
| :lt(n) | 匹配基于文檔順序、序號(hào)從0開(kāi)始的選中列表中序號(hào)小于n的元素(?jQuery的擴(kuò)展) |
| :not(sel) | 匹配的元素不匹配內(nèi)嵌選擇器sel |
| :nth(n) | 與“:eq(n)”相同(jQuery的擴(kuò)展) |
| :nth-child(n) | 匹配的元素是其父節(jié)點(diǎn)的第n個(gè)子元素。。可以是數(shù)值、單詞even,單詞odd或計(jì)算公式。 使用“:nth-child(even)”來(lái)選取那些在其父節(jié)點(diǎn)的子元素中排行第2或第4等序號(hào)的元素。使用“:nth-child(odd)”來(lái)選取那 些在其父節(jié)點(diǎn)的子元素中排行第1、第3等序號(hào)的元素。 更常見(jiàn)的情況是，n是xn或x?n+y這種計(jì)算公式，其中x和y是整數(shù)，n是字面量n。因此可以用nth-child(3n+1)來(lái)選取第1個(gè)、第4個(gè)、第7個(gè)等元素。 注意該過(guò)濾器的序號(hào)是從1開(kāi)始的，因此如果一個(gè)元素是其父節(jié)點(diǎn)的第一個(gè)子元素，會(huì)認(rèn)為它是奇數(shù)元素，匹配的是3n+1，而不是3n。要和“:even以及“:odd”過(guò)濾器區(qū)分開(kāi)來(lái)，后者匹配的序號(hào)是從0開(kāi)始的。 |
| :odd | 匹配列表中奇數(shù)(從0開(kāi)始)序號(hào)的元素。注意序號(hào)為1和3的元素分別是第2個(gè)和第4個(gè)匹配元素(?jQuery的擴(kuò)展) |
| :only-child | 匹配那些是其父節(jié)點(diǎn)唯一子節(jié)點(diǎn)的元素 |
| :parent | 匹配是父節(jié)點(diǎn)的元素，這與“:empty”相反(jQuery的擴(kuò)展) |
| :password | 匹配<input?type=”password”>元素(jQuery的擴(kuò)展) |
| :radio | 匹配<input?type=”radio”>元素(?j?Query的擴(kuò)展) |
| :reset | 匹配<input?type=”reset”>和<button?type=”reset”>元素(jQuery的擴(kuò)展) |
| :selected | 匹配選中的<option>元素。使用“:checked”來(lái)選取選中的復(fù)選框和單選框(jQuery的擴(kuò)展) |
| :submit | 匹配<input?type=”submit”>和<button?type=”submit”>元素(jQuery的擴(kuò)展) |
| :text | 匹配<input?type=”text”>元素(jQuery的擴(kuò)展) |
| :visible | 匹配所有當(dāng)前可見(jiàn)的元素:大體上可以認(rèn)為這些元素的offsetWidth和offsetHeight的值不為0，這和“:hidden”相反 |
注意:表中列舉的部分選擇器在圓括號(hào)中接受參數(shù)。例如，下面這個(gè)選擇器選取的元素在其父節(jié)點(diǎn)的子元素中排行第1或第2等，只要它們含有“JavaScript”單詞，就不包含元素。
p:nth-child(3n+1): text (JavaScript):not(:has(a))
通常來(lái)說(shuō)，指定標(biāo)簽類(lèi)型前綴，可以讓過(guò)濾器的運(yùn)行更高效。例如，不要簡(jiǎn)單使用”:radio”來(lái)選取單選框按鈕，使用“input:radio”會(huì) 更好。ID過(guò)濾器是個(gè)例外，不添加標(biāo)簽前綴時(shí)它會(huì)更高效。例如，選擇器“#address”通常比更明確的“form#address”更高效。
2、組合選擇器
使用特殊操作符或“組合符”可以將簡(jiǎn)單選擇器組合起來(lái)，表達(dá)文檔樹(shù)中元素之間的關(guān)系。下表列舉了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">里面 |
注意組合選擇器并不限于組合兩個(gè)選擇器:組合三個(gè)甚至更多選擇器也是允許的。組合選擇器從左到右處理。
3、選擇器組
傳遞給$()函數(shù)(或在樣式表中使用)的選擇器就是選擇器組，這是一個(gè)逗號(hào)分隔的列表，由一個(gè)或多個(gè)簡(jiǎn)單選擇器或組合選擇器構(gòu)成。選擇器組匹配的元 素只要匹配該選擇器組中的任何一個(gè)選擇器就行。對(duì)我們來(lái)說(shuō)，一個(gè)簡(jiǎn)單選擇器也可以認(rèn)為是一個(gè)選擇器組。下面是選擇器組的一些例子:
| 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選擇器語(yǔ)法允許在簡(jiǎn)單選擇器的某些過(guò)濾器中使用圓括號(hào)，但并不允許使用圓括號(hào)來(lái)進(jìn)行更常見(jiàn)的分組。例如，不能把選擇器組或組合選擇器放在圓括號(hào)中并且當(dāng)成簡(jiǎn)單選擇器:
| 1 2 | (h1, h2, h3)+p????????? //非法 h1+p, h2+p, h3+p??????? //正確的寫(xiě)法 |
二、選取方法
除了$()函數(shù)支持的選擇器語(yǔ)法，jQuery還定義了一些選取方法。本章中我們已看到過(guò)的大部分jQuery方法都是在選中元素上執(zhí)行某種操作。選取方法不一樣:它們會(huì)修改選中元素集，對(duì)其進(jìn)行提取、擴(kuò)充或僅作為新選取操作的起點(diǎn)。
本節(jié)描述這些選取方法。你會(huì)注意到這些選取方法中的多數(shù)提供的功能與選擇器語(yǔ)法的功能是一樣的。
提取選中元素最簡(jiǎn)單的方式是按位置提取。first()返回的jQuery對(duì)象僅包含選中元素中的第一個(gè)，last()返回的jQuery對(duì)象則只 包含最后一個(gè)元素。更通用的是，eq()方法返回物Query對(duì)象只包含指定序號(hào)的單個(gè)選中元素。(在jQuery 1.4中，負(fù)序號(hào)也是允許的，會(huì)從選區(qū)的末尾開(kāi)始計(jì)數(shù)。)注意這些方法返回的jQuery對(duì)象只含有一個(gè)元素。這與常見(jiàn)的數(shù)組序號(hào)是不一樣的，數(shù)組序號(hào)返 回的單一元素沒(méi)有經(jīng)過(guò)jQuery包裝:
| 1 2 3 4 5 6 | var?paras=$("p"); paras.first()?????????? //僅選取第一個(gè)<p>元素 paras.last()??????????? //僅選取最后一個(gè)<P> paras.eq(1)???????????? //選取第二個(gè)<P> paras.eq(-2)?????????? //選取倒數(shù)第二個(gè)<P> paras[1]??????????????? //第二個(gè)<P>元素自身 |
通過(guò)位置提取選區(qū)更通用的方法是slice()o jQuery的slice()方法與Array.slice()方法類(lèi)似:前者接受開(kāi)始和結(jié)束序號(hào)(負(fù)序號(hào)會(huì)從結(jié)尾處計(jì)算)，返回的jQuery對(duì)象包含 從開(kāi)始到結(jié)束序號(hào)(但不包含結(jié)束序號(hào))處的元素集。如果省略結(jié)束序號(hào)，返回的對(duì)象會(huì)包含從開(kāi)始序號(hào)起的所有元素:
| 1 2 | $("p").slice(2,5)?????? //選取第3個(gè)、第4個(gè)和第5個(gè)<P>元素 $("div").slice(-3)????? //選取最后3個(gè)<div>元素 |
filter()是通用的選區(qū)過(guò)濾方法，有3種調(diào)用方式:
| 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()它會(huì)返回一個(gè)新的jQuery對(duì)象，該 對(duì)象只包含不匹配該選擇器的元素。如果傳遞jQuery對(duì)象、元素?cái)?shù)組或單一元素給not()，它會(huì)返回除了顯式排除的元素之外的所有選中元素。如果傳遞 判斷函數(shù)給not()，該判斷函數(shù)的調(diào)用就與在filter()中一樣，只是返回的jQuery對(duì)象僅包含那些使得判斷函數(shù)返回false或其他假值的元 素:
| 1 | $("div").not("#header, #footer");??????? //除了兩個(gè)特殊元素之外的所有元素 |
在jQuery 1.4中，提取選區(qū)的另一種方式是has()方法。如果傳入選擇器，has()會(huì)返回一個(gè)新的jQuery對(duì)象，僅包含有子孫元素匹配該選擇器的選中元素。如果傳入文檔元素給has()，它會(huì)將選中元素集調(diào)整為那些是指定元素祖先節(jié)點(diǎn)的選中元素:
| 1 | $("p").has("a[href]")???????? //包含鏈接的段落 |
add()方法會(huì)擴(kuò)充選區(qū)，而不是對(duì)其進(jìn)行過(guò)濾或提取。可以將傳給$()函數(shù)的任何參數(shù)(除了函數(shù))照樣傳給add()方法。add()方法會(huì)返回 原來(lái)的選中元素，加上傳給$()函數(shù)的那些參數(shù)所選中(或創(chuàng)建)的那些元素。add()會(huì)移除重復(fù)元素，并對(duì)該組合選區(qū)進(jìn)行排序，以便里面的元素按照文檔 中的順序排列:
| 1 2 3 4 5 6 | //選取所有<div>和所有<P>元素的等價(jià)方式 $("div, p")???????????? //使用選擇器組 $("div").add(p)???????? //給add()傳入選擇器 $("div").add($("p"))??? //給add()傳入jQuery對(duì)象 var?paras = document.getElementsByTagName("p");?????? //類(lèi)數(shù)組對(duì)象 $("div").add(paras);??????? //給add()傳入元素?cái)?shù)組 |
1.將選中元素集用做上下文
上面描述的filter(). add()、和not()方法會(huì)在各自的選中元素集上執(zhí)行交集、并集和差集運(yùn)算。jQuery還定義一些其他選取方法可將當(dāng)前選中元素集作為上下文來(lái)使 用。對(duì)選中的每一個(gè)元素，這些方法會(huì)使用該選中元素作為上下文或起始點(diǎn)來(lái)得到新的選中元素集，然后返回一個(gè)新的jQuery對(duì)象，包含所有新的選中元素的 并集。與add()方法類(lèi)似，會(huì)移除重復(fù)元素并進(jìn)行排序，以便元素會(huì)按照在文檔中出現(xiàn)的順序排列好。
該類(lèi)別選取方法中最通用的是find()。它會(huì)在每一個(gè)當(dāng)前選中元素的子孫元素中尋找與指定選擇器字符串匹配的元素，然后它返回一個(gè)新的 jQuery對(duì)象來(lái)代表所匹配的子孫元素集。注意這些新選中的元素不會(huì)并入已存在的選中元素集中。同時(shí)注意find()和filter()不 同，filter()不會(huì)選中新元素，只是簡(jiǎn)單地將當(dāng)前選中的元素集進(jìn)行縮減:
| 1 | $("div").find("p")??????????? //在中查找元素，與$("div p")相同 |
該類(lèi)別中的其他方法返回新的jQuery對(duì)象，代表當(dāng)前選中元素集中每一個(gè)元素的子元素、兄弟元素或父元素。大部分都接受可選的選擇器字符串作為參數(shù)。不傳入選擇器時(shí)，它們會(huì)返回所有子元素、兄弟元素或父元素。傳入選擇器時(shí)，它們會(huì)過(guò)濾元素集，僅返回匹配的。
children()方法返回每一個(gè)選中元素的直接子元素，可以用可選的選擇器參數(shù)進(jìn)行過(guò)濾:
| 1 2 3 | //尋找id為"header"和"footer"元素的子節(jié)點(diǎn)元素中的所有<span>元素 //與$("#header>span, #footer>span")相同 $("#header, #footer").children("span") |
contents()方法與children()方法類(lèi)似，不同的是它會(huì)返回每一個(gè)元素的所有子節(jié)點(diǎn)，包括文本節(jié)點(diǎn)。如果選中元素集中 有<iframe>元素，contents()還會(huì)返回該<iframe>內(nèi)容的文檔對(duì)象。注意contents()不接受可選 的選擇器字符串參數(shù)—因?yàn)樗祷氐奈臋n節(jié)點(diǎn)不完全是元素，而選擇器字符串僅用來(lái)描述元素節(jié)點(diǎn)。
next()和prev()方法返回每一個(gè)選中元素的下一個(gè)和上一個(gè)兄弟元素(如果有的話(huà))。如果傳入了選擇器，會(huì)只選中匹配該選擇器的兄弟元素:
| 1 2 | $("h1").next("p")????? //與$("h1+p")相同 $("h1").prev()???????? //<h1>元素前面的兄弟元素 |
nextAll()和prevAll()返回每一個(gè)選中元素前面或后面的所有兄弟元素(如果有的話(huà))。siblings()方法則返回每一個(gè)選中元素的所有兄弟元素(選中元素本身不是自己的兄弟元素)。如果給這些方法傳人選擇器，則只會(huì)返回匹配的兄弟元素:
| 1 2 | $("#footer").nextAll("p")?????? //緊跟#footer元素的所有<P>兄弟元素 $("#footer").prevAll()????????? //#footer元素前面的所有兄弟元素 |
從jQuery 1.4開(kāi)始，nextUntil()和prevUntil()方法接受一個(gè)選擇器參數(shù)，會(huì)選取選中元素后面或前面的所有兄弟元素，直到找到某個(gè)匹配該選擇 器的兄弟元素為止。如果省略該選擇器，這兩個(gè)方法的作用就和不帶選擇器的nextAll()和prevAll()一樣。
parent()方法返回每一個(gè)選中元素的父節(jié)點(diǎn):
| 1 | $("li").parent()??????? //列表元素的父節(jié)點(diǎn)，比如<u1>和<ol>元素 |
parents()方法返回每一個(gè)選中元素的祖先節(jié)點(diǎn)(向上直到元素)。parent()和parents()都接受一個(gè)可選的選擇器字符串參數(shù):
| 1 | $("a[href]").parents("p")??????????? //含有鏈接的<P>元素 |
parentsUntil()返回每一個(gè)選中元素的祖先元素，直到出現(xiàn)匹配指定選擇器的第一個(gè)祖先元素。closest()方法必須傳人一個(gè)選擇器 字符串，會(huì)返回每一個(gè)選中元素的祖先元素中匹配該選擇器的最近一個(gè)祖先元素(如果有的話(huà))。對(duì)該方法而言，元素被認(rèn)為是自身的祖先元素。在jQuery 1.4中，還可以給closest()傳入一個(gè)祖先元素作為第二個(gè)參數(shù)，用來(lái)阻止jQuery往上查找時(shí)超越該指定元素:
| 1 2 | $("a[href]").closest("div")???????? //包含鏈接的最里層<div> $("a[href]").parentsUntil(":not(div)")????? //所有包裹<a>的<div>元素 |
2、恢復(fù)到之前的選中元素集
為了實(shí)現(xiàn)方法的鏈?zhǔn)秸{(diào)用，很多jQuery對(duì)象的方法最后都會(huì)返回調(diào)用對(duì)象。然而本節(jié)講述的方法都返回新的jQuery對(duì)象。可以鏈?zhǔn)秸{(diào)用下去，但必須清晰地意識(shí)到，在鏈?zhǔn)秸{(diào)用的后面所操作的元素集，可能已經(jīng)不是該鏈?zhǔn)秸{(diào)用開(kāi)始時(shí)的元素集了。
實(shí)際情況還要復(fù)雜些。當(dāng)這里所描述的選取方法在創(chuàng)建或返回一個(gè)新的ejQuery對(duì)象時(shí)，它們會(huì)給該對(duì)象添加一個(gè)到它派生自的舊jQuery對(duì)象的 內(nèi)部引用。這會(huì)創(chuàng)建一個(gè)jQuery對(duì)象的鏈?zhǔn)奖砘驐！nd()方法用來(lái)彈出棧，返回保存的jQuery對(duì)象。在鏈?zhǔn)秸{(diào)用中調(diào)用end()會(huì)將匹配元素 集還原到之前的狀態(tài)。考慮以下代碼:
| 1 2 3 4 5 6 7 8 9 10 11 12 | //尋找所有<div>元素，然后在其中尋找<P>元素 //高亮顯示<P>元素，然后給<div>元素添加一個(gè)邊框 //首先，不使用鏈?zhǔn)秸{(diào)用 var?divs = $("div"); var?paras = div.find("p"); paras.addClass("highlight"); divs.css("border", "solid black 1px"); //下面展現(xiàn)如何使用鏈?zhǔn)秸{(diào)用來(lái)實(shí)現(xiàn) $("div").find("p").addClass("highlight").end().css("border", "solid black 1px"); //還可以將操作調(diào)換順序來(lái)避免調(diào)用end() $("div").css("border", "solid block 1px").find("p").addClass("highlight"); |
如果想手動(dòng)定義選中元素集，同時(shí)保持與end()方法的兼容，可以將新的元素集作為數(shù)組或類(lèi)數(shù)組對(duì)象傳遞給push5tack()方法。指定的元素會(huì)成為新的選中元素，之前選中的元素集則會(huì)壓入棧中，之后可以用end()方法還原它們:
| 1 2 3 | var?sel = $("div");???????????? //選取所有<div>元素 sel.pushStack(document.getElementsByTagName("p"));????? //修改為所有<P>元素 sel.end();????????????????????? //還原為<div>元素 |
既然我們已經(jīng)講解了end()方法及其使用的選區(qū)棧，就有最后一個(gè)方法需要講解。andSelf()返回一個(gè)新的jQuery對(duì)象，包含當(dāng)前的所有 選中元素，加上之前的所有選中元素(會(huì)去除重復(fù)的)。andSelf()和add()方法一樣，或許“addPrev”是一個(gè)更具描述性的名字。作為例 子，考慮上面代碼的下述變化:高亮顯示<P>元素及其父節(jié)點(diǎn)中的<div>元素，然后給這些<div>元素添加邊 框:
| 1 2 3 4 | $("div").find("p").andSelf().???????????//尋找<div》中的<P>，合并起來(lái) addClass("highlight").??????????????//都高亮 end().end().????????????????????????????//彈出棧兩次，返回$("div") css("border",?"solid black 1px");???????//給divs添加邊框 |
總結(jié)
以上是生活随笔為你收集整理的jQuery选择器和选取方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Sublime Text 3 impor
- 下一篇： PDF.js开发笔记