JQuery遍历之向下遍历

JQuery的三种遍历：向下遍历，向上遍历，同级遍历。本文主要介绍向下遍历。

向下遍历：方法children()和find()

两个方法的区别是：children()方法的参数是可选的，只遍历一级，即它的直接子类；find()方法的参数是必选的，指定任意一级均可遍历，如：

html代码为：

<div id="div1">div1
<div id="div2">div2
<p>
<a>hello</a>
</p>
</div>
</div>

CSS代码为：

#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{
width: 300px;
height: 100px;
margin-top: 10px;
margin-left: 10px;
border: 3px solid chocolate;
}

原始效果图为：

children()方法的JS代码为：

$("#div1").children('#div2').css({border:"3px solid red"});

或

$("#div1").children().css({border:"3px solid red"});

前者为有参数的children()方法，后者为无参数的children()方法，两者向下遍历的效果一致。
效果图为：
若children()方法遍历p或者a，则无效。如：

$("#div1").children('#p').css({border:"3px solid red"});

遍历后的效果图为：
find()方法的JS代码为：

$("#div1").find("#div2").css({border:"3px solid red"})

该方法必须传入参数，遍历后的效果图为：
若遍历p或者a，同样有效，如：

$("#div1").find("p").css({border:"3px solid red"})

遍历后的效果图为：