jQuery中each()、find()和filter()等节点操作方法详解(推荐)_jquery

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" /> ] 

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> ]

推荐阅读:

jQuery中的each()详细介绍(推荐)

jQuery each函数源码分析

以上所述是小编给大家介绍的jQuery中each()、find()和filter()等节点操作方法详解(推荐)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, filter
find
hbase filter 详解、svndumpfilter 详解、jquery find filter、rp filter 详解、logstash filter详解,以便于您获取更多的相关知识。

时间: 2024-08-21 21:53:22

jQuery中each()、find()和filter()等节点操作方法详解(推荐)_jquery的相关文章

jQuery中text() val()和html()的区别实例详解_jquery

简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

Jquery揭秘系列:ajax原生js实现详解(推荐)_jquery

讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能. 为了功能的明确和清晰,我们

JQUERY中ON方法(事件委派机制)详解

前言 在开发项目的时候,JQuery的使用极其广泛,如果脑海中没有一点JQuery的基础知识,随性编写,那么就有可能造成bug问题.JQuery 1.4版本之后新增了on方法,这个用得比较多,为此我特地做了个总结,有需要的伙伴们可以好好的看一下这篇文章.on方法是专门用来处理事件委派机制的,笼统的说就是解决在你Ajax或者Pjax之后事件无法绑定到新添加的元素上的问题的,很多JQuery中的bug问题也都出现在这. 需求分析 1.解决Ajax或者Pjax之后导致点击事件失效问题. 效果图 1.当

jQuery中Ajax的get、post等方法详解

 前面我们讲述了jQuery中ajax的load()方法,小伙伴们反应非常好,今天我们就来讲解下jQuery中Ajax的get.post等方法,希望大家同样能够喜欢.     load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [

jQuery中ajax的load()与post()方法实例详解_jquery

本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

jQuery Validate验证框架详解(推荐)_jquery

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src=&qu

jQuery中Ajax的get、post等方法详解_jquery

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

jquery属性,遍历,HTML操作方法详解_jquery

Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQ

web.config配置节点大全详解

web.config配置节点大全详解 web.config 文件查找规则:        (1)如果在当前页面所在目录下存在web.config文件,查看是否存在所要查找的结 点名称,如果存在返回结果并停止查找.        (2)如果当前页面所在目录下不存在web.config文件或者web.config文件中不存在 该结点名,则查找它的上级目录,直到网站的根目录.        (3)如果网站根目录下不存在web.config文件或者web.config文件中不存在该节点 名则在%wind