jQuery 遍历DOM元素的总结

向上遍历的DOM树（祖先）

• parent()
• parents()
• parentsUntil()

     $(document).ready(function(){
     $("span").parent();   //获取span便签的第一个父元素（只获取一个）
     })；

     $(document).ready(function(){
     $("span").parents();  // 获取span 标签的所有父级元素（所有）
     });

     $(document).ready(function(){
     $("span").parents("ul");  // 获取span 标签的所有父级元素中 为 ul 标签的父级元素
     });

     $(document).ready(function(){
     $("span").parentsUntil("div");  // 获取span 标签到div标签中间的所有的父级元素 
     });

向下遍历DOM树（后代）

• children()

• find()

  $(document).ready(function(){
  $("div").children();  // 直接找到div标签的直接子元素，也就是儿子元素，不包括孙子元素
  });
  
  $(document).ready(function(){
  $("div").children("p.1");  // 直接找到div标签的直接子元素中的class=1的p标签（不包括孙子元素）
  });
  
  $(document).ready(function(){
  $("div").find("span"); // 返回被选元素的后代元素，一路向下直到最后一个后代。
  });
  
  $(document).ready(function(){
  $("div").find("*"); // 返回被选元素的所有后代
  });
  

在 DOM 树中水平遍历（同胞）

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

  $(document).ready(function(){
  $("h2").siblings(); //选中h2元素的所有同胞元素
  });
  
  $(document).ready(function(){
  $("h2").siblings("p"); //选中h2元素的所有同胞元素中的p元素
  });
  
  $(document).ready(function(){
  $("h2").next(); // 选中h2标签的下一个兄弟标签元素
  });
  
  $(document).ready(function(){
  $("h2").nextAll(); //选中h2标签所有跟随的兄弟元素
  });
  
  $(document).ready(function(){
  $("h2").nextUntil("h6");  //选中h2标签和h6标签中所有兄弟元素
  });
  
  ###  prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
  

在DOM树中（过滤）

• first()

• last()

• eq()

• filter()

• not

  $(document).ready(function(){
  $("div p").first(); // 返回（首个）div内部中的第一个p元素
  });
  
  $(document).ready(function(){
  $("div p").last(); // 返回（最后一个）div内部的最后一个p元素
  });
  
  $(document).ready(function(){
  $("p").eq(1);  // 返回第二个p标签
  });
  
  $(document).ready(function(){
  $("p").filter(".url"); //返回带有类名url的的p元素
  });
  
  $(document).ready(function(){
  $("p").not(".url"); // 返回不带有类名为url的p元素
  });