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,否则返回[]),遍历创建的新的对象和原来的对象均被改变了。