JQuery

最新推荐文章于 2022-07-12 20:10:27 发布

CircleSeven

最新推荐文章于 2022-07-12 20:10:27 发布

阅读量102

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/CircleSeven/article/details/112183235

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery遍历

一、定义

jQuery 遍历，即 以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止，用于根据其 相对于其他元素的关系 来"查找"（或选取）HTML 元素。

总结：遍历 = 开始元素 + 相对关系

二、遍历祖先

特殊	方法	说明	举例	举例说明
※	parent	返回被选元素的直接父元素，不管匹不匹配都不继续往下找	$("span").parent();	例子返回每个 <span> 元素的直接父元素
	parents	返回被选元素的所有祖先元素，直到文档的根元素 (<html>) 可以使用可选参数来过滤对祖先元素的搜索	$("span").parents(); $("span").parents("ul");	例子返回所有 <span> 元素的所有祖先例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
	parentsUntil	返回介于两个给定元素之间的所有祖先元素	$("span").parentsUntil("div");	例子返回介于 <span> 与 <div> 元素之间的所有祖先元素
※	closest	返回被选元素的第一个祖先元素，直到找到第一个匹配的父节点	$("span").closest("ul")	例子返回 <span> 的第一个祖先元素，是一个 <ul> 元素

三、遍历后代

特殊	方法	说明	举例	举例说明
※	children	返回被选元素的所有直接子元素可以使用可选参数来过滤对子元素的搜索	$("div").children(); $("div").children("p .aaa");	例子返回每个 <div> 元素的所有直接子元素例子返回类名为 "aaa" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
	find	返回被选元素的后代元素，直到最后一个后代	$("div").find("span"); *$("div").find("");**	例子返回属于 <div> 后代的所有 <span> 元素例子返回 <div> 的所有后代
※	contents	返回所有直接子元素，包括被选元素的文本和注释节点	$("div").contents().filter("em").wrap("<b/>")；	例子查找 <div> 元素内所有的文本节点，并把它们用 <b> 元素包裹起来

四、遍历同胞

方法	说明	举例	举例说明
siblings	返回被选元素的所有同胞元素可以使用可选参数来过滤对同胞元素的搜索	$("h2").siblings(); $("h2").siblings("p");	例子返回 <h2> 的所有同胞元素例子返回属于 <h2> 的同胞元素的所有 <p> 元素
next	返回被选元素的下一个同胞元素，只返回1个元素	$("h2").next();	例子返回 <h2> 的下一个同胞元素
nextAll	返回被选元素的所有跟随的同胞元素	$("h2").nextAll();	例子返回 <h2> 的所有跟随的同胞元素
nextUntil	返回介于两个给定参数之间的所有跟随的同胞元素，向下的顺序	$("h2").nextUntil("h6");	例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
prev	返回被选元素的上一个同胞元素，只返回1个元素	$("h2").prev();	例子返回 <h2> 的上一个同胞元素
prevAll	返回被选元素的所有之前的同胞元素	$("h2").prevAll();	例子返回 <h2> 的所有之前的同胞元素
prevUntil	返回介于两个给定参数之间的所有之前的同胞元素，向上的顺序	$("h6").prevUntil("h2");	例子返回介于 <h6> 与 <h2> 元素之间的所有同胞元素

五、遍历过滤

方法	说明	举例	举例说明
first	返回被选元素的首个元素	$("div p").first();	例子选取首个 <div> 元素内部的第一个 <p> 元素
last	返回被选元素的最后一个元素	$("div p").last();	例子选择最后一个 <div> 元素中的最后一个 <p> 元素
eq	返回被选元素中带有指定索引号的元素（索引号从 0 开始）	$("p").eq(1);	例子选取第二个 <p> 元素（索引号 1）
filter	允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回	$("p").filter(".url");	例子返回带有类名 "url" 的所有 <p> 元素
not	返回不匹配标准的所有元素	$("p").not(".url");	例子返回不带有类名 "url" 的所有 <p> 元素
has	返回拥有匹配指定选择器的一个或多个元素在其内的所有元素	$("p").has("span")	例子返回拥有一个 <span> 元素在其内的所有 <p> 元素
is	用于查看选择的元素是否匹配选择器	if ($("p").parent().is("div")) {alert("p 的父元素是 div");}	如果 <p> 的父元素是 <div> 元素，弹出提示信息
slice	选取基于开始点和结束点索引的元素的子集	$("p").slice(2,6)	从带有索引号为 2 的 <p> 元素开始选中 <p> 元素,直到索引号为6

六、常规遍历

方法

说明

举例

举例说明

each

为每个匹配元素规定要运行的函数

$("li").each(function(){ alert($(this).text()) });

例子输出每个 <li> 元素的文本

map

用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装

为新的数组返回

$.map(arr, function(n, i){ return (n.toUpperCase() + i); });

例子返回arr已经变成大写字母+索引号的组数

each与map的区别：

map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。

each()返回的是原来的数组，并不会新创建一个数组。

map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。

测试示例：

//测试遍历数组*******************************************************

var obj1 = [10,20];
$.each(obj1,function(i,param){
    return param+1;
});
//[10, 20]
//obj1:[10,20]

var obj2 = [10,20];
$.each(obj2,function(i,param){
    return [param+1];
});
//[10, 20]
//obj2:[10,20]

var obj3 = [10,20];
$.each(obj3,function(i,param){
    return [[param+1]];
});
//[10, 20]
//obj3:[10,20]

var obj4 = [10,20];
$.map(obj4,function(param){
    return param+1;
});
//[11, 21]
//obj4:[10,20]

var obj5 = [10,20];
$.map(obj5,function(param){
    return [param+1];
});
//[11, 21]
//obj5:[10,20]

var obj6 = [10,20];
$.map(obj6,function(param){
    return [[param+1]];
});
//[[11],[21]]
//obj6:[10,20]


//测试遍历对象***************************************************

var obj7 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.each(obj7,function(i,param){
    return (param.id += 1);
});
//{1:{id:'0011'},2:{id:'0021'}};
//obj7:{1:{id:'0011'},2:{id:'0021'}}

var obj7 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.each(obj7,function(i,param){
    (param.id += 1);
});
//{1:{id:'0011'},2:{id:'0021'}};
//obj7:{1:{id:'0011'},2:{id:'0021'}}

var obj8 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.map(obj8,function(param){
    return param.id += 1;
});
//["0011", "0021"]
//obj8:{1:{id:'0011'},2:{id:'0021'}}

var obj8 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.map(obj8,function(param){
    param.id += 1;
});
//[]
//obj8的值：{1:{id:'0011'},2:{id:'0021'}}

var obj9 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.each(obj9,function(i,param){
    return [[param.id += 1]];
});
//{1:{id:'0011'},2:{id:'0021'}}
//obj9:{1:{id:'0011'},2:{id:'0021'}}

var obj10 = {
    1:{id:'001'},
    2:{id:'002'}
};
$.map(obj10,function(param){
    return [[param.id += 1]];
});
// [["0011"],["0021"]]
//obj10的值: {1:{id:'0011'},2:{id:'0021'}}

总结：

当遍历数组的时候，each因为没有返回值，所以用不用return都不会改变其值，map因为是创建一个新的数组，所以对原来的数组也不会造成影响。

当遍历对象的时候，each遍历时候如果改动了参数值（不管return有木有加），原来的对象即被改变了，而map遍历的时候改动了参数值（必须加return，否则返回[]），遍历创建的新的对象和原来的对象均被改变了。

CircleSeven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

JQuery遍历目录一、定义二、遍历祖先三、遍历后代四、遍历同胞五、遍历过滤六、常规遍历一、定义jQuery 遍历，即以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。总结：遍历 = 开始元素 + 相对关系二、遍历祖先特殊方法说明举例举例说明 ※ parent 返回被选元素的直接父元素，不管匹不匹配都不继续往下找 $("sp...
复制链接

扫一扫