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

遍历后的效果图为：