接著上一篇繼續(xù)，今天學(xué)習(xí)對元素包裝集進(jìn)行精簡、擴(kuò)展或取子集的多種途徑。

站在用戶的角度思考問題，與客戶深入溝通，找到施秉網(wǎng)站設(shè)計(jì)與施秉網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋施秉地區(qū)。

一、管理包裝元素集合

不知道大家對包裝集這個(gè)詞有沒有概念，其實(shí)就是我們用jQuery選擇器或篩選器最終得到的一個(gè)或一組符合條件的集合。

比如：$("li:has(a)"); 它的包裝集就是所有包含<a>元素的<li>元素的集合。所以包裝集就是我們最終想對它操作的一個(gè)或一類元素，本篇講的內(nèi)容全是跟包裝集有關(guān)，大家千萬別把思路停留在一些選擇器的語法上，而是在宏觀上稍微提升點(diǎn)，我們做的是對集合的操作。這是為了能讓你今后更好的運(yùn)用jQuery鏈。

1、確定包裝集的大小

通常包裝集是一個(gè)javascript數(shù)組，而在javascript中有l(wèi)ength屬性去獲得數(shù)組的長度，jQuery中也有類似的東西，不過不是屬性，而是方法。

size()：返回包裝集里元素的個(gè)數(shù)。

舉個(gè)例子：

$("#myDiv").html("There are " + "$("a").size()" + " on this page.");

相信不用我解釋大家也很明白了，就是匹配頁面上所有的<a>元素，接著調(diào)用.size()方法，返回匹配的個(gè)數(shù)。

2、從包裝集獲取元素

包裝集既然是一個(gè)數(shù)組，那么我們當(dāng)然可以用下標(biāo)的形式去獲取集合中的指定某元素，像這樣 $("img[alt]")[0]; 匹配所有帶有alt屬性的<img>元素集合中的第一個(gè)元素。同樣，jQuery也為我們準(zhǔn)備了類似的方法去達(dá)到相同的效果。

get(index)：獲取包裝集里的一個(gè)或所有匹配元素。如果不指定參數(shù)，包裝集里的所有元素就以javascript數(shù)組形式返回；如果指定下標(biāo)參數(shù)，就返回下標(biāo)所對應(yīng)的元素。

$("img[alt]").get(0);    <==>   $("img[alt]")[0];

如果不指定參數(shù)的話，就是以javascript數(shù)組形式返回。

var allImgWithAlt = $("img[alt]").get();

此外，如果我們已知某元素，想知道它在某包裝集里的下標(biāo)，我們有另一個(gè)方法。

index(element)：在包裝集里查找傳入的元素，并返回該元素在包裝集里的順序下標(biāo)；如果該元素不在包裝集里，則返回-1。

element：整數(shù)，用于確定元素的下標(biāo)，也可不寫。

舉個(gè)例子：得到帶有類ironman的<img>元素集合中第五個(gè)元素在所有<img>里的位置。

var pos = $("img").index($("img.ironman]").get(4) );

3、篩選元素包裝集

有時(shí)候我們需要對現(xiàn)有的包裝集進(jìn)行添加元素。

add(expression)：把表達(dá)式參數(shù)所指定的元素添加到包裝集。表達(dá)式可以是選擇器、HTML片段、DOM元素或DOM元素?cái)?shù)組。返回的是包裝集。

expression：（字符串|元素|數(shù)組）指定添加到包裝集的元素。

舉個(gè)例子：包含alt屬性的<img>元素和包含title屬性的<img>的集合。

$("img[alt]").add("img[title]");

大家可能會想，這個(gè)不用add()也可以實(shí)現(xiàn)啊~

$("img[alt], img[title]");

這么寫我們不是更熟悉嗎？對，沒錯(cuò)，這樣寫也可以，但是想到如果我們要充分利用到j(luò)Query鏈的話，也許前者更好些。同樣的效果用前者可以這樣實(shí)現(xiàn)

$("img[alt]").addClass("RedBorder").add("img[title]").addClass("Bigger");

但是用后者的話我們就要這樣寫

$("img[alt]).addClass("RedBorder");$("img[alt], img[title]").addClass("Bigger");

哪個(gè)更好？這個(gè)是表示給包含alt屬性的<img>元素加RedBorder類，給包含alt屬性的<img>元素和包含title屬性的<img>的元素加Bigger類。

not(expression)：根據(jù)表達(dá)式參數(shù)的值，從包裝集里刪除元素。如果參數(shù)是jQuery篩選選擇器，則從包裝集里刪除任何匹配表達(dá)式的元素；如果參數(shù)是元素引用，則從包裝集里刪除該元素。返回的是包裝集。

expression：（字符串|元素|數(shù)組）

舉個(gè)例子：排除集合中title內(nèi)容包含puppy字段的剩余<img>元素。

$("img").not("[title*=puppy]");

filter(expression)：利用傳入的選擇器表達(dá)式或篩選函數(shù)，從包裝集里篩選元素。返回的是包裝集。

expression：（字符串|函數(shù)）

filter()的與not()想達(dá)成的效果是一樣的，那就是都是在縮小集合。不一樣的是not()用的是排除條件，而filter()用的是篩選條件。大家這塊一定要理清。

舉個(gè)例子：篩選出集合中title內(nèi)容包含puppy字段的<img>元素。

$("img").filter("[title*=puppy]");

最后再介紹個(gè)方法

slice(begin, end)：創(chuàng)建并返回新包裝集，新包裝集包含原始包裝集的連續(xù)的一部分。返回新建的包裝集。

begin：（數(shù)字）返回切片中的第一個(gè)元素的下標(biāo)（從0開始）。

end：（數(shù)字，可選）返回切片中的最后一個(gè)元素的下標(biāo)（從0開始），如省略，則指原始包裝集的末尾。

這個(gè)其實(shí)也沒什么的，應(yīng)該很少用到，舉兩個(gè)例子大家就明白了。

選擇頁面所有元素，創(chuàng)建只包含前4個(gè)元素的新包裝集。

$("*").slice(0,4);

選擇頁面所有元素，創(chuàng)建除前4個(gè)元素以外的新包裝集。

$("*").slice(4);

4、利用關(guān)系獲取包裝集

jQuery還允許根據(jù)和其他DOM元素的關(guān)系，從DOM選擇元素。具體的方法大家去網(wǎng)上查一下，我列舉兩個(gè)自己經(jīng)常會用到的

next(expression)：返回原始包裝集元素的所有唯一的下一個(gè)兄弟元素所組成的包裝集。

expression：（字符串）

parent(expression)：返回原始包裝集所有元素的唯一直接父元素所組成的包裝集。

expression：（字符串）

5、更多使用包裝集的途徑

jQuery為了大限度的方便用戶，還提供了其他方法。

find(selector)：返回新包裝集，包含原始包裝集里與傳入選擇器表達(dá)式相匹配的所有元素。注意：原始包裝集里的元素的后代，會因?yàn)榕c傳入的選擇器表達(dá)式相匹配而被包含在新包裝集里。

selector：（字符串）一個(gè)jQuery選擇器，元素必須匹配這個(gè)選擇器，才能成為新包裝集的一部分。

除了在包裝集里查找匹配的元素外，jQuery還提供方法查找包含指定字符串的元素。

contains(text)：返回新包裝集，由包含text參數(shù)所傳入的文本字符串的元素所組成。

text：（字符串）添加到新包裝集里的元素必須包含的文本。

比如：匹配包含文本“I love you”的段落

$("p").contains("I love you");

最后介紹一個(gè)方法，通常是用來對包裝集進(jìn)行測試的。

is(selector)：確定包裝集里是否有元素匹配傳入的選擇器表達(dá)式。如果至少有一個(gè)元素匹配傳入的選擇器，返回true，否則返回false。

selector：（字符串）選擇器表達(dá)式，用于測試包裝集的元素。

當(dāng)我們不知道自己的選擇器寫的是否對的時(shí)候，就可以拿它來測試一下

var hasImage = $("*").is("img");

如果當(dāng)前頁面包含<img>元素，則hasImage為true。

6、管理jQuery鏈

其實(shí)這章開始的時(shí)候已經(jīng)說了是為了讓我們能更好的運(yùn)用jQuery鏈，但當(dāng)時(shí)我是根據(jù)自己的理解才那么說的，但是學(xué)到這個(gè)地方的時(shí)候，書上也來了這么一句，看來jQuery鏈已經(jīng)被足夠重視。引用一段話“這種鏈能力不但允許以簡潔的方式寫出強(qiáng)大的操作，而且提高了效率，因?yàn)樗軌虬讯鄠€(gè)命令應(yīng)用到包裝集里，而不必重新計(jì)算包裝集?！?/p>

end()：在jQuery命令鏈內(nèi)調(diào)用，以便回退到前一個(gè)包裝集。返回前一個(gè)包裝集。

有了end()方法，就使jQuery鏈能更好的操作，延續(xù)下去。

這方面仍然是菜鳥，還得從真實(shí)項(xiàng)目中去不斷的摸索學(xué)習(xí)。

---

關(guān)于jQuery的學(xué)習(xí)系列筆記我寫的會比較簡潔，更注重的是快速上手使用，當(dāng)然，非常重要的知識點(diǎn)我還是會專門指出的。

PS：歡迎留言交流，24小時(shí)內(nèi)必有回復(fù)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：jQuery學(xué)習(xí)系列筆記（二）（續(xù)）-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://aaarwkj.com/article12/dpjogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)