jQuery中each()、find()、filter()等节点操作方法
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" /> ]
下面几篇一定要看,定会有很大收获,总结的太好了:
http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html
http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html
http://www.cnblogs.com/Fooo/archive/2011/01/11/1932900.html
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> ]
推荐文章,一定要看,定有大收获:
http://www.cnblogs.com/qiantuwuliang/archive/2009/10/18/1585682.html
jQuery中each()、find()、filter()等节点操作方法的更多相关文章
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jQuery中find和filter的区别
本文来自:http://blog.csdn.net/woshixuye/article/details/7255260 这是jQuery里常用的2个方法. 他们2者功能是完全不同的,而初学者往往会被误 ...
- jQuery中find()和filter()的区别
filter(expr):筛选出与指定表达式匹配的元素的元素集合,其中expr可以是多个选择器的组合.是对自身集合元素的筛选. find()会在元素内寻找匹配元素,而filter()是筛选元素:是对它 ...
- jquery中filter的用法
一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) { ...
- 关于each()、find()、filter()遍历节点的操作方法
关于each().find().filter()遍历节点的操作方法 each语法: each(fn) ; 返回值:jQuery fn:代表对于每个匹配元素所要执行的函数 each()方法共有三种形式 ...
- jquery中DOM的操作方法
先介绍几个比较简单的方法,不经常用到,做个记录 1. filter() 方法 顾名思义,filter是一个过滤器,如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配 ...
- jquery中关于append()的用法笔记---append()节点移动与复制之说
jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...
- jquery中filter(fn)的使用研究
jquery中filter(fn)给出的官方说明是: 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除 ...
随机推荐
- jquerymobile标签-属性手册
Button data-role="button" data-corners true | false data-icon home | delete | plus | arr ...
- oracle 数据库时间类型为字符串 时间范围大小查询
select * from invoicedetail t2 where t2.Memo is null and to_char(to_date(t2.PrintDate,'yyyy-MM-dd hh ...
- linux的文件种类与扩展名
一.文件种类: 1.普通文件(regular file)第一个字符为[ - ] 包括:①纯文本档(ASCII):这是Linux系统中最多的一种文件类型,称为纯文本档.是因为内容为我们人类可以直接读到的 ...
- [PaPaPa][需求说明书][V2.0]
前 言 大家好,我是“今晚打老虎”. 什么? 你问我为什么这次亮字号了? 还不是因为哥太出名了,即使我不亮你们也知道是我写的了. 自从发布了V1.0版本之后.群里又进来好多人.30K大大分发的任务 ...
- ODAC(V9.5.15) 学习笔记(十五)数据离线模式
数据离线模式(Disconnected Mode)是指数据库只有在需要的时候才连接,数据的处理放在客户端内存缓冲区中完成.这样做最大的好处是减少了网络资源依赖,对数据库服务器的资源开销和压力也减少.如 ...
- Android odex文件反编译
odex 是经过优化的dex文件,且独立存在于apk文件.odex 多用于系统预制应用或服务.通过将apk中的dex文件进行 odex,可以加载 apk 的启动速度,同时减小空间的占用.请参考ODEX ...
- springMVC对于controller处理方法返回值的可选类型
http://www.360doc.com/content/14/0309/19/834950_359081989.shtml
- 对象与Byte数组相互转化工具方法
/** * 对象转byte * @param obj * @return */ private byte[] ObjectToByte(Object obj) { byte[] bytes = nul ...
- EFW框架源代码版本升级记录说明
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- SupportV7包中 SwipeRefreshLayout 修改下拉控件的距离
//修改下拉距离 ViewTreeObserver vto = mCategoryResults.mSwipeRefreshLayout.getViewTreeObserver(); vto.addO ...