Jquery基础（第三遍历）

来源：互联网发布：飞机票在线制作软件编辑：程序博客网时间：2024/05/16 07:03

<%@ 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>

0 0