html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
//<script type="text/javascript" src="js/try.js" ></script>
<link rel="stylesheet" href="css/style.css" /> </head>
<body>
<div id="div1">div1
<div id="div2">div2
<p>
<a href="#">Hello</a>
</p>
</div>
</div>
</body>
</html>
css
#div1 {
width:500px;
height:250px;
border:4px solid aquamarine;
}
#div2 {
width:400px;
height:150px;
margin-left:10px ;
margin-top: 10px;
border:4px solid blue;
}
p {
margin-left:10px ;
margin-top: 10px;
width:150px;
height:80px;
border:4px solid seagreen;
}
效果：
向下遍历后：
添加js
1.使用
children()方法
$(document).ready(function(){
$("#div1").children().css({border:"4px solid black"})
});效果：
2.使用find方法
js
$(document).ready(function(){
$("#div1").find("#div2").css({border:"4px solid black"})
});
效果：
children() 方法和find()方法的区别
1.
$(document).ready(function(){
$("#div1").find("p").css({border:"4px solid black"})
});
2.
$(document).ready(function(){
$("#div1").children("p").css({border:"4px solid black"})
});
效果：
children方法获得的仅仅是元素一下级的子元素，即：immediate children。
find方法获得所有下级元素，即：descendants of these elements in the DOM tree
children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。
2017-09-21 20:37:02