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 键盘事件的几个基本方法
Oct 30 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
jquery仿微信聊天界面
May 06 jQuery
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
el-form 多层级表单的实现示例
Sep 10 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
APMServ使用说明
2006/10/23 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python中强大的format函数实例详解
2018/12/05 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js