JQuery中的find、filter和each方法学习
2016-05-24 18:15
411 查看
find()
概述 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
参数 [b]exprStringV1.0[/b] 用于查找的表达式
[b]jQuery object objectV1.6[/b] 一个用于匹配元素的jQuery对象
[b]elementDOMElementV1.6[/b] 一个DOM元素
示例 描述: 从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
filter()
概述筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
参数
[b]exprStringV1.0[/b]
字符串值,包含供匹配当前元素集合的选择器表达式。
[b]jQuery objectobjectV1.0[/b]
现有的jQuery对象,以匹配当前的元素。
[b]element ExpressionV1.4[/b]
一个用于匹配元素的DOM元素。
[b]function(index) FunctionV1.4[/b]
一个函数用来作为测试元素的集合。它接受一个参数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> ]
参数selector描述:
保留第一个以及带有select类的元素
HTML 代码:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代码:
$("p").filter(".selected, :first")
结果:
[ <p>Hello</p>, <p class="selected">And Again</p> ]
回调函数 描述:
保留子元素中不含有ol的元素。
HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代码:
$("p").filter(function(index) { return $("ol", this).length == 0; });
结果:
[ <p>How are you?</p> ]
each()
概述以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。
参数
[b]callbackFunctionV1.0[/b]
对于每个匹配的元素所要执行的函数
示例
描述:
迭代两个图像,并设置它们的 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" /> ]
描述:
如果你想得到 jQuery对象,可以使用 $(this) 函数。
HTML 代码:
<button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div>
jQuery 代码:
$("img").each(function(){ $(this).toggleClass("example"); });
描述:
你可以使用 'return' 来提前跳出 each() 循环。
HTML 代码:
<button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div>
jQuery 代码:
$("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });
相关文章推荐
- jQuery使用中可能被XSS攻击的一些危险环节提醒
- jquery常用正则表达式
- 如何设置jquery的ajax方法为同步
- JQuery Validate使用总结
- Jquery 设置style:display 通过ID隐藏区域
- jquery------使用jQuery的委托方法
- 轻松掌握jQuery中wrap()与unwrap()函数的用法
- 使用jQuery中的wrap()函数操作HTML元素的教程
- 实例解析jQuery中proxy()函数的用法
- jQuery前端开发35个小技巧
- 主题样式切换代码:jQuery Theme Switcher
- 基于JQuery实现图片上传预览与删除操作
- jquery根据字符切割字符串
- 通过jquery-ui中的sortable来实现拖拽排序的简单实例
- jquery datatables如何去掉搜索框和每页显示多少条数据
- jquery 简短代码
- JqueryMobile Demo
- JQuery点击事件回到页面顶部效果的实现代码
- JQuery时间控件自定义格式为'yy-MM'的时间
- jQuery click事件多次执行问题