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"})

遍历后的效果图为：