Jquery是开发人员的必备课程,做程序的,如果不会点Js,你就会觉得道路崎岖不平,步履艰难啊~~~
接下来,将对Jquery的遍历做一个系统的分析:
<html> <div class="container"> <ul> <span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span> <li>Hello,my name is Tom!</li> <li class="error">This is my friend Jack,I'll introduce to you!</li> <li> <ul> <li>He likes balls.</li> <li class="error">He likes music. <input type="button" class="play_muc" value="播放音乐"/> <span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span> </li> <span> jQuery 遍历函数包括了用于筛选、查找和串联元素的方法</span> <li>He is a lazzy boy ....</li> </ul> </li> <li>Now,for me, I like music too.</li> <li class="error">I don't like eat too much!!</li> <li> <a href="#" class="surprice">点我有惊喜哦。。。</a> </li> </ul> </div> </html>
这是一段在接下来的例子中一直会用到的代码。
1.find() 方法
find在Jquery的使用中非常频繁,所有,我要第一个消灭它。
find() : 获取当前元素集合中每个元素的后代
语法: .find(selector)
select : 是字符串值,包含供匹配当前元素集合的选择器表达式。
find不会单独使用,前面必有一个DOM元素集合的Jquery对象, .find()方法允许我们在DOM数中搜索这些元素的后代,并用匹配元素来构造一个新的Jquery对象。.find() 和 .children() 方法类似,不同的是后者仅沿着DOM树向下遍历单一层级。
eg:
$(".surprice").click(function(){ $("ul").parent().find("li").css('color','red'); }); //所有的ul下面的li标签里面的字体都会变成红色,不管li里面嵌套了什么
2.each()方法
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整数)。返回'false' 将停止循环(就像在普通的循环中使用“break”)。返回'true'跳至下一个循环(就像在普通的循环中使用‘continue’)。
语法:
$(selector).each(funciton(index,element));
function(index,element) : 必需。为每个匹配元素规定运行的函数
index : 选择器的index位置
element : 当前的元素(也可使用“this”选择器)
eg:
$(".surprice").click(function(){ $("ul li").each(function(i,item){ var class_name = $(item).attr("class"); if(class_name == "error"){ $(this).css('color','red'); //等同于 $(item).css('color','red'); } }); }); //所有class值为"error"的字体都会变成红色
3.children()方法
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合通过可选的表达式来过滤所匹配的子元素,注意: children() 只考虑子元素而不考虑所有后代元素。
语法:
.children(selector);
selector : 字符串值,包含匹配元素的选择器表达式。
如果给定表示DOM元素集合的Jquery对象, .children() 允许我们检索DOM树中的这些元素,并用匹配元素构造新的Jquery对象。
eg:
$(".surprice").click(function(){ $("ul").children("span").css("color",'red'); }); //根据上面代码,只有直接跟在ul下的span会发生变化, 而存在ul下的li下的span没有发生变化,也就是第一个和第三个span发生了变化。
相关推荐
jquery遍历节点树jquery遍历节点树jquery遍历节点树
jquery 遍历 学习
浅析jQuery 遍历函数,javascript中的each遍历_.docx
$.each()遍历数组或对象的具体用法
本篇文章提供一款jquery遍历select教程代码,主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次,这样所有的select就给查询了一次。 代码如下:[removed][removed]...
jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport
jQuery 遍历 – 祖先 祖先是父、祖父或曾祖父等等。 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() ...
jQuery 遍历css选择器 学习
jquery 分页——jqueryPage.js
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 二、语法 .map(callback(index,domElement)) 三、详细说明 由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以...
jQuery游戏——小鸟飞行
jquery-1.4.2&&jquery-1.4.2-vsdoc.js.rar
jQuery 遍历 – 后代 后代是子、孙、曾孙等等。 通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。 向下遍历 DOM 树 下面是两个用于向下遍历 DOM 树的 jQuery 方法: children() find() jQuery ...
下面小编就为大家带来一篇jquery 遍历数组 each 方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Jquery遍历json的两种数据结构.pdf
Jquery遍历json的两种数据结构.docxJquery遍历json的两种数据结构.docx
主要介绍了js/jquery遍历对象和数组的方法,结合实例形式分析了数组遍历的forEach,map与each方法常见使用技巧,需要的朋友可以参考下
Jquery遍历json的两种数据结构借鉴.pdf
NULL 博文链接:https://onestopweb.iteye.com/blog/2321995