Review jQuery-遍历

最新推荐文章于 2020-06-04 10:38:37 发布

马码侠

最新推荐文章于 2020-06-04 10:38:37 发布

阅读量109

点赞数

分类专栏：前端文章标签： jQuery 遍历

本文链接：https://blog.csdn.net/qq_43093230/article/details/99325849

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

祖先遍历（向上遍历）

parent()方法：返回被选元素的直接父元素（只会对上一级DOM树进行遍历）
parents()方法：返回所有祖先元素，直到文档的根元素html
parentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素。用法如下

 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

后代遍历（向下遍历）

children()方法返回被选元素的直接子元素,也可以对子元素进行筛选（如下）

		$("div").children("p.1").css({"color":"red","border":"2px solid red"});

find()方法：一路向下直到最后一个后代

//返回div后代的所有span元素
 $("div").find("span");
 //返回div之后的所有后代元素
 $("div").find("*");

同胞遍历

siblings() 方法返回被选元素的所有同胞元素可以加参数进行过滤。

 				 $("h2").siblings("p");

next() 方法返回被选元素的下一个同胞元素(只返回一个元素)。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法反方向遍历

遍历方法过滤

first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素（从0开始）。
filter() 方法自定义标准，不匹配的会被从集合中删除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("button").filter(".url").css("background-color","yellow");
   $("p").filter(".studying").css("background-color","red");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p class="studying">菜鸟教程 (index 0).</p>
<button class="url">http://www.runoob.com (index 1)。</button>
<p class="url">http://www.google.com (index 3)。</p>
<button class="studying">google (index 2).</button>


</body>
</html>

运行结果：
在这里插入图片描述

not() 返回不匹配标准元素，与filter()相反
学习笔记参考菜鸟教程

马码侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Review jQuery-遍历

祖先遍历（向上遍历）parent()方法：返回被选元素的直接父元素（只会对上一级DOM树进行遍历）parents()方法：返回所有祖先元素，直到文档的根元素htmlparentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素。用法如下 $("span").parentsUntil("div").css({"color":"red","border":"2px soli...
复制链接

扫一扫