|
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="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>
从上面可以看出新包装集内的元素增进了
parents()要领 VS closest()要领
这两个要领都是由当前元素向上查找所匹配的元素，差异之处如下:
<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>
对付parents要领来说，会将当前元素向上的全部匹配元素插手新的包装集并返回，而closest要领只会包括离当前元素最近的元素,以是行使closest要领后当前包装集内的元素只能为1个可能0个
而parents要领并不包罗当前包装集内的元素，而closest要了解包括当前包装集内的元素
直系子元素 VS 全部子元素
行使children可以返回直系子元素，而用find加通配符的要领可以返回除了文本节点之外的全部子元素：
<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要领只会含有当前元素的直系子元素，而行使find(“>*也会发生同样的结果”).若想采用全部的直系子元素直接在find内传”*”通配符
回到已往的end()要领以及andself()要领
上述全部的要领，以及好比add(),next(),nextAll(),prev()等对包装集内元素举办改变的要领都可以行使end()要领来举办返回:
<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()要领老是和最近的一个和包装集改变的要领相抵消，而抵消其他要领:
<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>
假如必要在改变包装集内元素的环境下还必要包括原始的包装集内元素，行使andself要领:
<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>
我们会发明起首alert two,由于two先被选择
出处：http://www.cnblogs.com/CareySon/ （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
