1、向下遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
#div1{
width:500px;
height:200px;
border:3px solid chocolate;
}
#div2{
width:400px;
height:150px;
margin-top:10px;
margin-left:10px;
border:3px solid chocolate;
}
p{
margin-left:10px;
margin-top:10px;
width:150px;
height:80px;
border:3px solid chocolate;
}
</style>
<script>
/*
* children
* find
* */
$(document).ready(function(){
// $("#div1").children().css({border:"3px solid red"});
// $("#div1").children("#div2").css({border:"3px solid red"});/*这两句效果是一样的*/
/*children获取节点只能获取自己的儿子，而不能获取自己孙子节点的信息*/
$("#div1").find("#p").css({border:"3px solid red"});
/*find可以查找到自己的后代元素，所有的后代都可以在查找范围内
* find方法需要带一个参数*/
});
</script>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<p id="p">p
<a href="http://www.baidu.com">
hello
</a>
</p>
</div>
</div>
</body>
</html>
2、向上遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
#div1{
width:500px;
height:200px;
border:3px solid chocolate;
}
#div2{
width:400px;
height:150px;
margin-top:10px;
margin-left:10px;
border:3px solid chocolate;
}
p{
margin-left:10px;
margin-top:10px;
width:150px;
height:80px;
border:3px solid chocolate;
}
</style>
<script>
/*
* parent()
* parents()
* parentsUntil()
* */
$(document).ready(function(){
// $("a").parent().css({border:"3px solid red"});/*向上的一级父元素变成这个样式*/
// $("a").parents().css({border:"3px solid red"});/*向上的所有父元素都要变成这个样式*/
$("a").parents("#div1").css({border:"3px solid red"});/*向上的某一个父元素要变成这个样式*/
// $("a").parentsUntil("#div1").css({border:"3px solid red"});/*向上的所有父元素直到div1之前的都要变为这个样式（a和div1之间的元素）*/
});
</script>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<p id="p">p
<a href="http://www.baidu.com">
hello
</a>
</p>
</div>
</div>
</body>
</html>
3、同级遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
/* siblings()
next()
nextAll()
nextUntil() //until是区间的意思
prev() //下面三个是向前算的方法
prevAll()
prevUntil()
*/
$(document).ready(function(){
// $("h4").siblings().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/
// $("h4").next().css({border:"3px solid red"});/*修改掉除了给定元素的所有同级元素为给定的样式*/
// $("h2").nextAll("h6").css({border:"3px solid red"});/*包括h2在内的下面所有同级元素*//*这里加参数是下面所有的某一类元素，不加参数就是默认所有的同级元素*/
$("h2").nextUntil("h4").css({border:"3px solid red"});/*h2到给定的元素之间的所有元素*/
});
</script>
<style>
.classa *{
display:block;
border:3px solid gray;
color:gray;
padding:5px;
margin:15px;
}
</style>
</head>
<body>
<div class="classa">
<p>p</p>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>
</body>
</html>
4、过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
/*
* first()//寻找同样元素的第一个
* last()//寻找同样元素的最后一个
* eq()
* filter()
* not()
* */
$(document).ready(function(){
// $("div p").first().css({backgroundColor:"red"});
/*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/
// $("div p").first().css("background-color","red");
/*jQuery中的backgroundColor和css中的background-color还不一样呢。。。666*/
// $("div p").eq(1).css("background-color","red");
/*eq()方法指定第几个元素，索引从0开始*/
// $("div p").filter(".plei1").css("background-color","red");/*选中满足要求的*/
$("div p").not(".plei1").css("background-color","red");/*过滤给定要求的*/
});
</script>
<style>
</style>
</head>
<body>
<div>
<p class="plei1">div1的p</p>
</div>
<div>
<p>div2的p</p>
</div>
<div>
<p class="plei1">div3的p</p>
</div>
<div>
<p>div3的p</p>
</div>
</body>
</html>
