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实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
js 解析 JSON 数据简单示例
Apr 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP个人网站架设连环讲(一)
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP children()函数讲解
2019/02/03 PHP
网站上面有这种切换效果
2006/06/26 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
详解用async/await来处理异步
2019/08/28 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python快速查找算法应用实例
2014/09/26 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
《理想的风筝》教学反思
2014/04/11 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers