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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
layui 解决form表单点击无反应的问题
Oct 25 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
input file获得文件根目录简单实现
2013/04/26 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
Python3基础之list列表实例解析
2014/08/13 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
护士求职推荐信范文
2013/11/23 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
保护环境演讲稿
2014/05/10 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
同学聚会通知书
2015/04/20 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android