快捷導(dǎo)航

JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變

更新時(shí)間：2009年12月14日 23:17:38 作者：

JQuery包裝集內(nèi)的元素在一開(kāi)始的選定后，還可以通過(guò)一系列JQuery提供的方法對(duì)包裝集內(nèi)的元素進(jìn)行擴(kuò)充，修改，篩選，刪除find()方法 VS filter()方法

這兩個(gè)方法是比較容易搞混的.
filter方法表示的是對(duì)當(dāng)前內(nèi)部的元素進(jìn)行篩選,這個(gè)接受兩種參數(shù)，一個(gè)返回bool的function,或者是JQuery的選擇表達(dá)式,包裝集內(nèi)的元素只會(huì)小于等于當(dāng)前包裝集內(nèi)的元素，并且含有的元素屬于原來(lái)包裝集內(nèi)元素的子集：

復(fù)制代碼代碼如下:

 
<div id="one">the one</div> 
<div id="two"><p>the two</p></div> 
<div id="three"><p>the three</p></div> 
<script type="text/javascript"> 
alert($("div").filter(":not(:first):not(:last)").html()); //out put<p>the two</p> 
alert($("div").filter(function() { return this.id == "two"; }).html());//output <p>the two</p> as well 
</script> 

而find方法卻是在當(dāng)前元素內(nèi)（子元素）部進(jìn)行查找，并返回新的包裝集,這意味著包裝集可能會(huì)增加:

復(fù)制代碼代碼如下:

 
<div id="one">the one</div> 
<div id="two"><p>the two</p><p></p><p></p></div> 
<div id="three"><p>the three</p></div> 
<script type="text/javascript"> 
alert($("div").find("p").text()); //alert "the twothe three" 
alert($("div").find("p").length); //alert 4 instead of original 3 
</script> 

從上面可以看出新包裝集內(nèi)的元素增加了

parents()方法 VS closest()方法
這兩個(gè)方法都是由當(dāng)前元素向上查找所匹配的元素，不同之處如下:

復(fù)制代碼代碼如下:

 
<div id="wrapper"> 
<div id="two"> 
<p id="p1"> 
the two</p> 
</div> 
</div> 
<script type="text/javascript"> 
alert($("#p1").parents("div").length); //alert 2 include <div id="two"> and <div id="wrapper"> 
alert($("#p1").closest("div").length); //alert 1 and only include <div id="two"> 
alert($("#p1").parents("p").length); //alert 0 because it does not include current element 
alert($("#p1").closest("p").length); //alert 1 because it contain itself <p id="p1"> 
</script> 

對(duì)于parents方法來(lái)說(shuō)，會(huì)將當(dāng)前元素向上的所有匹配元素加入新的包裝集并返回，而closest方法只會(huì)包含離當(dāng)前元素最近的元素,所以使用closest方法后當(dāng)前包裝集內(nèi)的元素只能為1個(gè)或者0個(gè)
而parents方法并不包括當(dāng)前包裝集內(nèi)的元素，而closest方法會(huì)包含當(dāng)前包裝集內(nèi)的元素
直系子元素 VS 所有子元素
使用children可以返回直系子元素，而用find加通配符的方法可以返回除了文本節(jié)點(diǎn)之外的所有子元素：

復(fù)制代碼代碼如下:

 
<div id="wrapper"> 
text node here 
<div id="two"> 
<p id="p1"> 
the two</p> 
</div> 
</div> 
<script type="text/javascript"> 
alert($("#wrapper").children().length);//alert 1 because only direct children included 
alert($("#wrapper").find("*").length); //alert 2 because all desendants included 
alert($("#wrapper").find(">*").length);//alert 1 because only direct children included 
</script> 

可以看出children方法只會(huì)含有當(dāng)前元素的直系子元素，而使用find(“>*也會(huì)產(chǎn)生同樣的效果”).若想采納所有的直系子元素直接在find內(nèi)傳”*”通配符
回到過(guò)去的end()方法以及andself()方法
上述所有的方法，以及比如add(),next(),nextAll(),prev()等對(duì)包裝集內(nèi)元素進(jìn)行改變的方法都可以使用end()方法來(lái)進(jìn)行返回:

復(fù)制代碼代碼如下:

 
<div id="wrapper"> 
text node here 
<div id="two"> 
<p id="p1"> 
the two</p> 
</div> 
</div> 
<script type="text/javascript"> 
alert($("#wrapper").find(">*").end().get(0).id);//alert "wrapper" instead of "two" because of end() method has been used 
</script> 

end()方法總是和最近的一個(gè)和包裝集改變的方法相抵消，而抵消其他方法:

復(fù)制代碼代碼如下:

 
<div id="wrapper"> 
text node here 
<div id="two"> 
<p id="p1"> 
the two</p> 
</div> 
</div> 
<script type="text/javascript"> 
alert($("#wrapper").find("#p1").html("new value").end().get(0).id);//alert wrapper because end method 
alert($("#p1").text())//alert new value bacause the html method in previous has not been cancelled 
</script> 

如果需要在改變包裝集內(nèi)元素的情況下還需要包含原始的包裝集內(nèi)元素，使用andself方法:

復(fù)制代碼代碼如下:

 
<div id="wrapper"> 
text node here 
<div id="two"> 
<p id="p1"> 
the two</p> 
</div> 
</div> 
<script type="text/javascript"> 
var $a = $("#wrapper").find("#two").andSelf(); 
alert($a[0].id);//alert two first 
alert($a[1].id);//alert wrapper after that 
</script> 

我們會(huì)發(fā)現(xiàn)首先alert two,因?yàn)閠wo先被選擇

PS:liver writer代碼高亮插件我一加中文就是亂碼，很郁悶的說(shuō)-.-!!所以注釋都是鳥(niǎo)語(yǔ)了

您可能感興趣的文章: