JQuery（学习笔记四）JQuery 结点遍历

àì夳堔傛蜴生んèń 2022-05-14 12:23 162阅读 0赞

# 一、向上遍历 DOM 树 #

*  parent()
 *  parents()
 *  parentsUntil()

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$("span").parent();//返回每个 &lt;span&gt; 元素的的直接父元素</p> <p>$("span").parents();//返回所有 &lt;span&gt; 元素的所有祖先</p> <p>$("span").parents("ul");//返回所有 &lt;span&gt; 元素的所有祖先，并且它是 &lt;ul&gt; 元素</p> </td> 
  </tr> 
 </tbody> 
</table>

# 二、向下遍历 DOM 树 #

*  children()
 *  find()

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$("div").children();返回每个 &lt;div&gt; 元素的所有直接子元素</p> <p>//返回类名为 "1" 的所有 &lt;p&gt; 元素，并且它们是 &lt;div&gt; 的直接子元素</p> <p>$("div").children("p.1");</p> <p>$("div").find("span");//返回属于 &lt;div&gt; 后代的所有 &lt;span&gt; 元素</p> <p>$("div").find("*");//返回 &lt;div&gt; 的所有后代</p> </td> 
  </tr> 
 </tbody> 
</table>

# 三、水平遍历DOM 树 #

*  siblings()
 *  next()
 *  nextAll()
 *  nextUntil()
 *  prev()
 *  prevAll()
 *  prevUntil()

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$("h2").siblings();//返回 &lt;h2&gt; 的所有同胞元素</p> <p>$("h2").siblings("p");//返回属于 &lt;h2&gt; 的同胞元素的所有 &lt;p&gt; 元素</p> <p>$("h2").next();//返回 &lt;h2&gt; 的下一个同胞元素</p> <p>$("h2").nextAll();//返回 &lt;h2&gt; 的所有跟随的同胞元素</p> <p>$("h2").nextUntil("h6");//返回介于 &lt;h2&gt; 与 &lt;h6&gt; 元素之间的所有同胞元素</p> <p>/*&nbsp; &nbsp;prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历。</p> <p>*/</p> </td> 
  </tr> 
 </tbody> 
</table>

# 四、过滤 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$("div p").first();//选取首个 &lt;div&gt; 元素内部的第一个 &lt;p&gt; 元素</p> <p>$("div p").last();//选择最后一个 &lt;div&gt; 元素中的最后一个 &lt;p&gt; 元素</p> <p>$("p").eq(1);//返回被选元素中带有指定索引号(从0开始)的元素</p> <p>$("p").filter(".url");//返回带有类名 "url" 的所有 &lt;p&gt; 元素</p> <p>$("p").not(".url");//返回不带有类名 "url" 的所有 &lt;p&gt; 元素</p> </td> 
  </tr> 
 </tbody> 
</table>