find()

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数
exprStringV1.0

用于查找的表达式

jQuery object objectV1.6

一个用于匹配元素的jQuery对象

elementDOMElementV1.6

一个DOM元素

示例
描述:

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]

filter()

概述

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

参数
exprStringV1.0

字符串值,包含供匹配当前元素集合的选择器表达式。

jQuery objectobjectV1.0

现有的jQuery对象,以匹配当前的元素。

element ExpressionV1.4

一个用于匹配元素的DOM元素。

function(index) FunctionV1.4

一个函数用来作为测试元素的集合。它接受一个参数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')。

参数
callbackFunctionV1.0

对于每个匹配的元素所要执行的函数

示例
描述:

迭代两个图像,并设置它们的 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中的find、filter和each方法学习的更多相关文章

  1. Jquery中each的三种遍历方法

    Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...

  2. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  3. jquery中获取iframe的id的方法:

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

  4. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  5. jquery中隐藏div的几种方法

    //jQuery中的显示.隐藏方法 $("#id").show()://表示display:block,    $("#id").hide()://表示disp ...

  6. JQuery中serialize()、serializeArray()和param()方法示例介绍

    在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...

  7. js原生态函数中使用jQuery中的 $(this)无效的解决方法

    原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...

  8. jQuery中绑定事件的几种方法

    以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){});  (2)target.bind("click",functi ...

  9. jQuery 中让我误解的那些方法

    至今我都不能说把 jQuery 中的方法在实践中都用了一遍, 一部分是用不到,一部分则是我未能体会它的魅力, 所以今天就来收录一下,那些从我们之间溜走的美丽. $.fn.add() 一开始对它的理解就 ...

  10. jQuery中动态创建、添加元素的方法总结

    <input type="button" value="创建元素" id="btn"> <div id="box ...

随机推荐

  1. BZOJ 3796 后缀数组+KMP

    思路: 写得我头脑发蒙,,, 旁边还有俩唱歌的 抓狂 (感谢lh大爷查错) 首先 1.w是s1的子串 2.w是s2的子串 这两步很好办啊~ 后缀数组一下O(n)就可以搞 重点是 这个:3.s3不是w的 ...

  2. POJ 1543 暴搜

    题意:输出a^3=b^3+c^3+d^3的所有a,b,c,d的值. b,c,d由小到大且b,c,d都大于1. 思路: 按照题意写就好.... // by SiriusRen #include < ...

  3. JS装饰器模式

    装饰器模式:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法),保护原有功能的完整性需要条件:原对象,新内容(属性/方法)个人理解:重新实现一下,原对象的方法,在方法内容,先执行原对象的 ...

  4. Android Span的简单使用

     Spanable中的常用常量:  Spanned.SPAN_EXCLUSIVE_EXCLUSIVE --- 不包含start和end所在的端点                 (a,b)  Span ...

  5. 【摘录】JAVA内存管理-自动选择垃圾收集器算法

    在J2SE 5.0,垃圾收集的默认值:垃圾收集器.堆大小以及JVM的类型(客户端还是服务器)都会根据应用运行的硬件平台和操作系统自动选择.相比之前设置命令行参数的方式,自动选择很好的匹配了不同类型的应 ...

  6. CDR X7正版优惠,3折来袭,好礼相送,行不行动?

    意料之中的是,CorelDRAW系列软件在618期间成绩再次突破历史,成为新高.因为X7版本活动在6月15号的才上, 加之在此之前从没有过X7的活动优惠,势头之猛,可想而知,如此一来,官方预定的限量2 ...

  7. redis 篇 - hash

    hash 可以认为是 python 中的字典 field 不允许重复 string类型的field和value的映射表 每个hash可以存储 232 - 1 键值对(40多亿) 方法 hest key ...

  8. IOS-iOS 8 : Location Services not working(iOS 8 定位应用定位失败)

    如果是xcode6和ios 8的话,需要调用 CLLocationManager requestAlwaysAuthorization 方法,具体步骤如下: 1. @interface里: CLLoc ...

  9. 作用域与this

    面向对象 一.单例模式 1.1 对象数据类型的作用: 把描述一个对象的属性和方法放在一个单独的空间,与其他的对象分割开,即时出现属性名相同的情况,也不会产生冲突 var name="xiao ...

  10. HDU 1061 Rightmost Digit( 快速幂水 )

    链接:传送门 题意:求 N^N 的个位 思路:快速幂水题 /********************************************************************** ...