jQuery中each()、find()和filter()等节点操作方法详解(推荐)


Posted in Javascript onMay 25, 2016

1.each(callback)

官方解释:

返回值:jQuery

概述

以每一个匹配的元素作为上下文来执行一个函数。

意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

参数

callback

对于每个匹配的元素所要执行的函数

示例

描述:

迭代两个图像,并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

<img/><img/>

jQuery 代码:

$("img").each(function(i){
this.src = "test" + i + ".jpg";
});

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

2.find(expr|obj|ele)

官方解释:

返回值:jQuery

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数

expr String
用于查找的表达式
jQuery object object
一个用于匹配元素的jQuery对象
element DOMElement
一个DOM元素

示例

描述:

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

<p><span>Hello</span>, how are you?</p>

jQuery 代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

3.filter(expr|obj|ele|fn)

官方解释:

概述

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

参数

expr String
字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery object object
现有的jQuery对象,以匹配当前的元素。
element Expression
一个用于匹配元素的DOM元素。
function(index) Function
一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

示例

参数selector描述:

保留带有select类的元素

HTML 代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

$("p").filter(".selected")

结果:

[ <p class="selected">And Again</p> ]

三水点靠木推荐阅读:

以上所述是小编给大家介绍的jQuery中each()、find()和filter()等节点操作方法详解(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery后代选择器用法实例
Dec 23 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
vue-cli常用设置总结
Feb 24 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Vue实现多标签选择器
Nov 28 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 #Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 #Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 #Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 #Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 #Javascript
js提交form表单,并传递参数的实现方法
May 25 #Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 #Javascript
You might like
PHP新手上路(十三)
2006/10/09 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python记录程序运行时间的三种方法
2017/07/14 Python
python reduce 函数使用详解
2017/12/05 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
升职自荐信
2013/11/28 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
医生见习报告范文
2014/11/03 职场文书
结婚主持人致辞
2015/07/28 职场文书
公司老总年会致辞
2015/07/30 职场文书
环保建议书作文400字
2015/09/14 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android