Jquery基础（第三遍历）

最新推荐文章于 2022-12-19 22:22:19 发布

jpp411

最新推荐文章于 2022-12-19 22:22:19 发布

阅读量266

点赞数

分类专栏： Jquery基础

本文链接：https://blog.csdn.net/jpp411/article/details/52669872

版权

Jquery基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery遍历dom树</title>
<style type="text/css">
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
//parent()返回父元素
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
//parents 返回其所有的祖先元素
/* $(document).ready(function(){
//$("a").parents().css({"color":"blue","border":"2px solid blue"})
$("a").parents("ul").css({"color":"blue","border":"2px solid blue"})
}); */
//parentsUntil()返回介于两个给定元素之间的所有祖先元素
/* $(document).ready(function(){
$("a").parentsUntil("ul").css({"color":"yellow","border":"2px solid yellow"});
}) */
//遍历后代：children()\find(),用于对下一级遍历
$(document).ready(function(){
$("div").children("p.1").css({"color":"yellow","border":"2px solid yellow"});
})
//返回div的所有后代
$(document).ready(function(){
$("div").find("*").css({"color":"yellow","border":"2px solid red"});
})
//遍历同胞 siblings()、next()、nextAll()、nextUnit()、prev()、
//prevAll()、prevUntil()
/* $(document).ready(function(){
//$("div").siblings().css({"color":"yellow","border":"2px solid blue"});
$("h2").siblings("p").css({"color":"blue","border":"2px solid blue"});

}) */

$(document).ready(function(){
//$("div").siblings().css({"color":"yellow","border":"2px solid blue"});
$("span").nextUntil("h3").css({"color":"black","border":"2px solid black"});

})
//搜索元素的范围：first()、last()、eq()、filter()和not()允许您选取匹配或者不匹配的指定的元素
$(document).ready(function(){
//$("div").siblings().css({"color":"yellow","border":"2px solid blue"});
$("h3").next.css({"color":"black","border":"2px solid black"});

})

</script>

</head>
<body class="ancestors">body (曾曾祖父元素)
<div class="divclass">
<div style="width: 500px;">
div(曾祖父元素)
<ul>
ul(祖父元素)
<li>li(父元素)</li>
</ul>
</div>

<div style="width: 500px;">
div(祖父元素)
<p>p(父元素) <span>span</span>
</p>
</div>

<div style="width:500px;">div (曾祖父元素)
<p class="1">取子元素中p值为1的值</p>
<p class="1">第二测试</p>
<ul >ul (祖父元素)
<li>li (父元素)
<a>aaa</a>
</li>
</ul>
</div>
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>

jpp411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础（第三遍历）

pageEncoding="UTF-8"%>jquery遍历dom树.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}//parent()返回父元素$(document).re
复制链接

扫一扫