JQuery Tips(3) 关于$()包装集内元素的改变


Posted in Javascript onDecember 14, 2009

这两个方法是比较容易搞混的.
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先被选择

PS:liver writer代码高亮插件我一加中文就是乱码,很郁闷的说-.-!!所以注释都是鸟语了

Javascript 相关文章推荐
JS的replace方法详细介绍
Nov 09 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 #Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 #Javascript
JQuery下关于$.Ready()的分析
Dec 13 #Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 #Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 #Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 #Javascript
页面中iframe相互传值传参
Dec 13 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php获取linux命令结果的实例
2017/03/13 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
详解Django中的form库的使用
2015/07/18 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
国家励志奖学金获奖感言
2014/01/09 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
法学函授自我鉴定
2014/02/06 职场文书
纪检监察建议书
2014/05/19 职场文书
机动车登记业务委托书
2014/10/08 职场文书
教师党员自我评价2015
2015/03/04 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Python中字符串对象语法分享
2022/02/24 Python