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小技巧
Mar 01 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
JS二维数组的定义说明
Mar 03 Javascript
jquery实现图片切换代码
Oct 13 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue 中filter的多种用法
Apr 26 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
详解JavaScript类型判断的四种方法
Oct 21 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
万能的php分页类
2017/07/06 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
python比较2个xml内容的方法
2015/05/11 Python
简单理解Python中的装饰器
2015/07/31 Python
Python 登录网站详解及实例
2017/04/11 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
python2 对excel表格操作完整示例
2020/02/23 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
求职信格式范本
2013/11/15 职场文书
党校学习自我鉴定
2014/02/24 职场文书
药学职务聘任书
2014/03/29 职场文书
双拥工作宣传标语
2014/06/26 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
Python如何配置环境变量详解
2021/05/18 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript