关于each()、find()、filter()遍历节点的操作方法

each语法:

each(fn)  ;

返回值:jQuery

fn:代表对于每个匹配元素所要执行的函数

each()方法共有三种形式

第一种(不带参数):

$(‘img‘).each(function(){

$(this).toggleClass("example");

});

注意:此时的this代指的是DOM对象而不是jQuery对象

如果想得到jQuery对象,可以使用$(this)函数

第二种(带一个参数):

$(‘img‘).each(function(i){

   this.src="test"+i+"jpg";

});

第三种(带两个参数):

$(‘img‘).each(function(i,element){

this.src="test"+i+"jpg";

// element.src="test"+i+"jpg";

});

概述:以每一个匹配元素作为上下文来执行一个函数

每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合总所处的位置的数字值作为参数(从0开始的整型)。返回‘false’将停止循环(就像在普通的循环中使用‘break’)。返回‘true’跳至下一个循环(就像在普通循环中使用‘continue’)。

最常用的形式是第二种,接下来我们写一个示例

查找方法--------------------------------find()

搜索所有与指定表达式匹配的元素

示例:

$(‘p‘).find(‘span‘);     //在所有p元素的后代节点中查找span元素

注意:find()是不允许空参的(即必须要跟一个选择器)

情景:如果我就想拿p标签里的所有后代,那应该怎么办?

解决方案:那就用到了我们之前学习的全局选择器(*)  一般情况不会用到

时间: 2024-10-28 23:55:19

关于each()、find()、filter()遍历节点的操作方法的相关文章

递归遍历节点树

<!DOCTYPE HTML> <html> <head> <title>遍历节点树</title> <meta charset="utf-8"/> <script src="js/3_2.js"></script> </head> <body> <span>Hello World !</span> <ul id=&q

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

jquery 遍历节点

1.jquery 遍历节点时如果,这些节点是随时更新的就要这样通过选择器获取节点: self.modelSlide.find('li').eq(0).appendTo(self.modelSlide); 2. 当有动画播放时,如果不想点击按钮频繁点击时,要设置开关 self.isclick = false;      //默认是可以点击 self.prevBtn.on('click',function(){ if(self.isclick) return;    //如果他已经存在就让他跳出 s

JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)

一.节点树 节点树 概念 - HTML DOM 将 HTML 文档视作树结构 - 文档中的元素.属性.文本.注释等都被看作一个节点 - 这种结构被称为节点树: 上下层节点 - 节点树中的节点彼此拥有层级关系,DOM 使用如下属性遍历整棵节点树: 平行的节点 - 节点树中使用如下方法访问平行的兄弟节点: 二.元素树 元素树 概念 - 元素树是节点树的一个子集,只包含其中的元素节点 上下层元素 - 与节点树一样,元素树上的元素节点也有父子关系,使用如下属性可以获取这些关系: 平行的元素 - 元素树使

DOM遍历节点以及属性

一.遍历DOM节点 遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性.在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容. 二.遍历节点属性 Element类型是使用attributes属性的唯一一个DOM节点类型.attributes属性中包含一个NamedNodeMap(节点属性列表).NamedNodeMap对象拥有下列方法

数据结构之 图论---图的深度遍历( 输出dfs的先后遍历节点 )

图的深度遍历 Time Limit: 1000MS Memory limit: 65536K 题目描述 请定一个无向图,顶点编号从0到n-1,用深度优先搜索(DFS),遍历并输出.遍历时,先遍历节点编号小的. 输入 输入第一行为整数n(0 < n < 100),表示数据的组数. 对于每组数据,第一行是两个整数k,m(0 < k < 100,0 < m < k*k),表示有m条边,k个顶点. 下面的m行,每行是空格隔开的两个整数u,v,表示一条连接u,v顶点的无向边. 输

[ActionScript 3.0] as3处理xml的功能和遍历节点

as3比as2处理xml的功能增强了N倍,获取或遍历节点非常之方便,类似于json对像的处理方式. XML 的一个强大功能是它能够通过文本字符的线性字符串提供复杂的嵌套数据.将数据加载到 XML 对象时,ActionScript 会分析数据并将其分层结构加载到内存(如果 XML 数据格式有误,它会发送运行时错误). 利用 XML 和 XMLList 对象的运算符和方法可以轻松遍历 XML 数据的结构. 1.读取外部 XML 文档 可以使用 URLLoader 类从 URL 加载 XML 数据.若

jQuery中each()、find()、filter()等节点操作方法

1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'

jQuery遍历节点方法汇总

1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点 1 <p>Hello</p> 2 <div> 3 <span>Hello Again</span> 4 <p class="box">您好!</p> 5 </div> 6 <p>And Again</p> 7 8 <script type="t