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则这个元素被删除 ...
随机推荐
- 配置新系统(Win7 x64)
新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...
- UDP网络通信OSC 协议
使用方法 ofxOscMessage mesg; mesg.setAddress("m"); mesg.addIntArg(); mesg.addIntArg(); mesg.ad ...
- 对已经add的文件不在跟踪
记录每次更新到仓库 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝.接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库. 请记住,工作 ...
- 未知高度定宽div水平居中及垂直居中(兼容ie6及其他牛逼浏览器)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- p范数(p norm)
先回顾一下范数的定义(en.wikipedia.org/wiki/Norm_(mathematics)): Given a vector space V over a subfield F of th ...
- 突破GFW,使用node.js
原文链接:https://cnodejs.org/topic/4f9904f9407edba21468f31e 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法(三种办法任意一种都能解决问题,建议 ...
- java-Filter
java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...
- oracle 语句创建表空间、用户、授权
/*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace yuhang_temp tempfile 'D:\oracledata\yuhang_te ...
- 【转】基于CXF Java 搭建Web Service (Restful Web Service与基于SOAP的Web Service混合方案)
转载:http://www.cnblogs.com/windwithlife/archive/2013/03/03/2942157.html 一,选择一个合适的,Web开发环境: 我选择的是Eclip ...
- 关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 (详细图解)
screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现: / ...