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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php中的比较运算符详解
2013/10/28 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python OS模块常用函数说明
2015/05/23 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
英语专业自荐书
2014/06/13 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
清洁工岗位职责
2015/02/13 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年超市工作总结
2015/04/09 职场文书
亮剑观后感
2015/06/05 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
python 如何用terminal输入参数
2021/05/25 Python