jQuery—向下遍历（children和find方法）

HTML代码：

    
    
    
    



      
容器
           
承载列表
               

                   
法师
                   
德鲁伊
                   
潜行者
               
           
      


      child子元素
      child孙元素
      find孙元素

JS代码：

$(document).ready(function () {
   
   $("#childBtn1").click(function () {
       $("#container").children().css({border:"8px solid black"});
   });
   $("#childBtn2").click(function () {
       $("#container").children("ul").css({border:"8px solid black"});
   });
   $("#findBtn").click(function () {
       $("#container").find("ul").css({border:"8px solid blueviolet"});
   });
}); 
//向下遍历时，children（）方法只能访问子元素，括号内只能添加子元素，添加其他没用
//而find（）方法可以访问孙元素以及更下一级元素

效果：