JQuery Tips（3）----關于$()包裝集内元素的改變

JQuery包裝集内的元素在一開始的標明後，還可以通過一系列JQuery提供的方法對包裝集内的元素進行擴充，修改，篩選，删除

find()方法 VS filter()方法

這兩個方法是比較容易搞混的.

filter方法表示的是對目前内部的元素進行篩選,這個接受兩種參數，一個傳回bool的function,或者是JQuery的選擇表達式,包裝集内的元素隻會小于等于目前包裝集内的元素，并且含有的元素屬于原來包裝集内元素的子集：

<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方法卻是在目前元素内（子元素）部進行查找，并傳回新的包裝集,這意味着包裝集可能會增加:

<div id="two"><p>the two</p><p></p><p></p></div>

        alert($("div").find("p").text()); //alert "the twothe three"

        alert($("div").find("p").length); //alert 4 instead of original 3

從上面可以看出新包裝集内的元素增加了

parents()方法  VS closest()方法

這兩個方法都是由目前元素向上查找所比對的元素，不同之處如下:

    <div id="wrapper">

        <div id="two">

            <p id="p1">

                the two</p>

        </div>

        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">

對于parents方法來說，會将目前元素向上的所有比對元素加入新的包裝集并傳回，而closest方法隻會包含離目前元素最近的元素,是以使用closest方法後目前包裝集内的元素隻能為1個或者0個

而parents方法并不包括目前包裝集内的元素，而closest方法會包含目前包裝集内的元素

直系子元素 VS 所有子元素

使用children可以傳回直系子元素，而用find加通配符的方法可以傳回除了文本節點之外的所有子元素：

        text node here

        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

可以看出children方法隻會含有目前元素的直系子元素，而使用find(“>*也會産生同樣的效果”).若想采納所有的直系子元素直接在find内傳”*”通配符

回到過去的end()方法以及andself()方法

上述所有的方法，以及比如add(),next(),nextAll(),prev()等對包裝集内元素進行改變的方法都可以使用end()方法來進行傳回:

        alert($("#wrapper").find(">*").end().get(0).id);//alert "wrapper" instead of "two" because of end() method has been used

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

        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

如果需要在改變包裝集内元素的情況下還需要包含原始的包裝集内元素，使用andself方法:

        var $a = $("#wrapper").find("#two").andSelf();

        alert($a[0].id);//alert two first

        alert($a[1].id);//alert wrapper after that

我們會發現首先alert two,因為two先被選擇

-------------------------------------傳說中的分隔符---------------------------

PS:liver writer代碼高亮插件我一加中文就是亂碼，很郁悶的說-.-!!是以注釋都是鳥語了

分類: JQuery

本文轉自CareySon部落格園部落格，原文連結：http://www.cnblogs.com/CareySon/archive/2009/12/14/1623963.html，如需轉載請自行聯系原作者