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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
悬浮数字的实现案例
Feb 19 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
简单的vuex 的使用案例笔记
Apr 13 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将时间差转换为字符串提示
2011/09/07 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
详解php实现页面静态化原理
2017/06/21 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python绘制3D图形
2018/05/03 Python
python主线程捕获子线程的方法
2018/06/17 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
python如何快速生成时间戳
2020/07/21 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
浙江文明网签名寄语
2014/01/18 职场文书
上课睡觉检讨书
2014/01/28 职场文书
消防安全员岗位职责
2014/03/10 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
个人总结格式范文
2015/03/09 职场文书
草房子读书笔记
2015/06/29 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android