JQuery中的find、filter和each方法学习
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方法学习的更多相关文章
- Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- jquery中获取iframe的id的方法:
jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- jquery中隐藏div的几种方法
//jQuery中的显示.隐藏方法 $("#id").show()://表示display:block, $("#id").hide()://表示disp ...
- JQuery中serialize()、serializeArray()和param()方法示例介绍
在项目中做form表单提交的时候,如果参数比较少,可以通过jquery一个个取得,但是当 form表参数很多的情况下,还是一一取得的话无疑是加大了工作量,那我们需要咱们获取到表单的所有参数呢,幸好,j ...
- js原生态函数中使用jQuery中的 $(this)无效的解决方法
原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...
- jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
- jQuery 中让我误解的那些方法
至今我都不能说把 jQuery 中的方法在实践中都用了一遍, 一部分是用不到,一部分则是我未能体会它的魅力, 所以今天就来收录一下,那些从我们之间溜走的美丽. $.fn.add() 一开始对它的理解就 ...
- jQuery中动态创建、添加元素的方法总结
<input type="button" value="创建元素" id="btn"> <div id="box ...
随机推荐
- windows安装mysql注意点
MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的. 以msi格式安装完成后,先别忙着启动mysql,我们还需要修改一下配置文件(如果没有配置,之后启动的时候就会出现图中的错误哦!:错 ...
- CLR - 设计类型
前言 好记性不如烂“笔头”系列... 目录 类型基础 基元类型.引用类型和值类型 类型与成员 常量与字段 方法 类型基础 “运行时”要求每个类型最终都从System.Object 类型派生. 由于所有 ...
- python 3.x 学习笔记16 (队列queue 以及 multiprocessing模块)
1.队列(queue) 用法: import queue q = queue.Queue() #先进先出模式 q.put(1) #存放数据在q里 作用: 1)解耦 2)提高效率 class qu ...
- 用replaceState操作路由的方法封装
export class Router { ReplaceState(url, data) { var query = this.Generate(data); window.history.repl ...
- https://blog.csdn.net/sxf359/article/details/71082404
https://blog.csdn.net/sxf359/article/details/71082404
- 2019-03-18 OpenCV Tesseract-OCR 下载 安装 配置(cv2 报错)
OpenCV 下载 安装 配置 1.下载和Python版本对应的版本,此为下载地址 2.安装(在powershell管理员模式下安装) pip3 install .\opencv_python-3.4 ...
- 【Codeforces Round #476 (Div. 2) [Thanks, Telegram!] A】Paper Airplanes
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 统计每个人需要的sheet个数. 乘上k 然后除p就是需要的pack个数了 [代码] #include <bits/stdc+ ...
- java源码之TreeMap
Map的单元是对键值对的处理,之前分析过的两种Map,HashMap和LinkedHashMap都是用哈希值去寻找我们想要的键值对,优点是理想情况下O(1)的查找速度. 那如果我们在一个对查找性能要求 ...
- NYIST 1070 诡异的电梯【Ⅰ】
诡异的电梯[Ⅰ]时间限制:1000 ms | 内存限制:65535 KB难度:3 描述新的宿舍楼有 N(1≤N≤100000) 层 and M(1≤M≤100000)个学生. 在新的宿舍楼里, 为了节 ...
- Sublime Text 3 Package Control安装
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50618314 安装好Sublime T ...