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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
range 标准化之获取
Aug 28 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
react实现复选框全选和反选组件效果
Aug 25 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jQuery.each使用详解
2015/07/07 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
查摆问题对照检查材料
2014/08/28 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
护士自荐信怎么写
2015/03/06 职场文书
教师教育教学随笔
2015/08/15 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android