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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
详解javascript replace高级用法
Feb 17 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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+xslt在windows平台上
2006/10/09 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
Vue中props的使用详解
2018/06/15 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
深入理解Python对Json的解析
2017/02/14 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python实现简单名片管理系统
2018/11/30 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
名人演讲稿范文
2013/12/28 职场文书
大学生职业规划论文
2014/01/11 职场文书
房地产活动策划方案
2014/05/14 职场文书
委托证明模板
2014/09/16 职场文书
离职报告格式
2014/11/04 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
详解Redis复制原理
2021/06/04 Redis
java代码实现空间切割
2022/01/18 Java/Android
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android