jQuery 遍历介绍
向上遍历祖先 DOM 树
parent()：返回被选元素的直接父元素
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ( html )
$(document).ready(function(){
$("span").parents().css({"color":"red","border":"2px solid red"});
});
使用可选参数来过滤对祖先元素的搜索:
// 返回所有 span 元素的所有祖先，并且它只有是 ul 元素
$(document).ready(function(){
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
parentsUntil()：返回介于两个给定元素之间的所有祖先元素
// 返回介于 span 与 div 元素之间的 span 的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
向下遍历后代 DOM 树
children() 返回被选元素的所有直接子元素
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
使用可选参数来过滤对子元素的搜索:
<html>
<head>
<script>
// 返回类名为 "1" 的所有 p 元素，并且它们是 div 的直接子元素
$(document).ready(function(){
$("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">
div (当前元素)
<p class="1">p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p class="2">p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
</html>
- **find() **: 返回被选元素的后代元素，一路向下直到最后一个后代
// 返回 div 的所有后代
$(document).ready(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"});
});
// 返回属于 div 后代的所有 span 元素
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
水平遍历兄弟 DOM 树
siblings()：返回被选元素的所有兄弟元素
// 返回 h2 的同胞元素
$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
使用可选参数来过滤对同胞元素的搜索：
// 返回属于 h2 的同胞元素的所有 p 元素
$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
next()：返回被选元素的下一个同胞元素,该方法只返回一个元素
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
nextAll()：返回被选元素之后的所有跟随的同胞元素
// 返回 h2 的所有跟随的同胞元素
$(document).ready(function(){
$("h2").nextAll();
});
nextUntil() : 返回介于两个给定参数之间的所有跟随的同胞元素
// 返回介于 h2 与 h6 元素之间的所有同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
- prev(): 返回被选元素的上一个同胞元素,该方法只返回一个元素
- prevAll()：返回被选元素之前的所有跟随的同胞元素
- prevUntil()：返回介于两个给定参数之间的所有跟随的同胞元素
遍历- 过滤（缩小搜索元素的范围)
first()：返回被选元素的首个元素
// 选取首个 div 元素内部的第一个 p 元素
$(document).ready(function(){
$("div p").first().css("background-color","yellow");
});
last() : 返回被选元素的最后一个元素
// 选择最后一个 div 元素中的最后一个 p 元素
$(document).ready(function(){
$("div p").last().css("background-color","yellow");
});
eq() : 返回被选元素中带有指定索引号的元素，索引号从 0 开始
$(document).ready(function(){
$("p").eq(1).css("background-color","yellow");
});
filter() ：允许规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
// 返回带有类名 "url" 的所有 p 元素
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
not() : 返回不匹配标准的所有元素，not() 方法与 filter() 相反
// 返回不带有类名 "url" 的所有 p 元素
$(document).ready(function(){
$("p").not(".url").css("background-color","yellow");
});
not 和 eq 可以实现反选的效果:
// 选取索引值不为 1 的 p 元素，并把背景颜色设置为黄色
$("p").not(":eq(1)").css("background-color","yellow");如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论