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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
大型晚会策划方案
2014/02/06 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
商铺租赁意向书
2014/04/01 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js