欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 遍历

发布时间：2025/6/15 编程问答 47 豆豆
生活随笔 收集整理的这篇文章主要介绍了 jQuery 遍历 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
jQuery 遍历
意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

遍历 DOM
通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
遍历方法中最大的种类是树遍历（tree-traversal）。

祖先是父、祖父、曾祖父等等。
后代是子、孙、曾孙等等。
同胞拥有相同的父。

向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树，以查找元素的祖先：
  • parent()
  • parents()
  • parentsUntil()

jQuery parent() 方法
parent() 方法返回被选元素的 直接父元素。该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回 所有 <span> 元素的直接父元素：
[javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("span").parent();  
  • });  

    • jQuery parents() 方法
    parents() 方法返回被选元素的 所有祖先元素，它一路向上直到文档的根元素 (<html>)。
    下面的例子返回 所有 <span> 元素的所有祖先：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("span").parents();  
  • });  

    • 也可以使用可选参数来过滤对祖先元素的搜索。
    下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("span").parents("ul");  
  • });  

    • jQuery parentsUntil() 方法
    parentsUntil() 方法返回介于两个给定元素 之间的所有祖先元素。
    下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("span").parentsUntil("div");  
  • });  
    • 也许这样理解会更好记：使用可选参数，返回被选元素的祖先元素，直到可选参数为止。
    注意，这个之间，是不包括 <span> 与 <div> 元素的。

    向下遍历 DOM 树
    下面是两个用于向下遍历 DOM 树的 jQuery 方法，以查找元素的后代：
    • children()
    • find()

    jQuery children() 方法
    children() 方法返回被选元素的 所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
    下面的例子返回 每个 <div> 元素的所有直接子元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("div").children();  
  • });  

    • 也可以使用可选参数来过滤对子元素的搜索。
    下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("div").children("p.1");  
  • });  

    • jQuery find() 方法
    find() 方法返回被选元素的 后代元素，一路向下直到最后一个后代。
    下面的例子返回属于 <div> 后代的所有 <span> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("div").find("span");  
  • });  

    • 下面的例子返回 <div> 的 所有后代：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   <span style="background-color: rgb(255, 255, 204);">$("div").find("*");</span>  
  • });  

    • 注意，不等价于 $("div").find(""); 。



    在 DOM 树中水平遍历
    有许多有用的方法让我们在 DOM 树进行水平遍历，遍历元素的同胞元素：

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

    jQuery siblings() 方法
    siblings() 方法返回被选元素的 所有同胞元素。
    下面的例子返回 <h2> 的所有同胞元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("h2").siblings();  
  • });  

    • 也可以使用可选参数来过滤对同胞元素的搜索。
    下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("h2").siblings("p");  
  • });  

    • jQuery next() 方法
    next() 方法返回被选元素的 下一个同胞元素。该方法只返回一个元素。
    下面的例子返回 <h2> 的下一个同胞元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("h2").next();  
  • });  

    • jQuery nextAll() 方法
    nextAll() 方法返回被选元素的 所有跟随的同胞元素。
    下面的例子返回 <h2> 的所有跟随的同胞元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("h2").nextAll();  
  • });  

    • jQuery nextUntil() 方法
    nextUntil() 方法返回介于两个给定参数 之间的所有跟随的同胞元素。
    下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("h2").nextUntil("h6");  
  • });  
    • 注意，这个之间，是不包括 <h2> 与 <h6> 元素的。

    jQuery prev(), prevAll() & prevUntil() 方法
    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已： 它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

    jQuery 遍历 - 过滤
    三个最基本的过滤方法是：first(), last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。
    其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。

    jQuery first() 方法
    first() 方法返回被选元素的 首个元素。
    下面的例子选取 首个 <div> 元素内部的第一个 <p> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("div p").first();  
  • });  
    • 注意， p 的位置在 $("div p") 而不是 first() 。
    如果是 $("div").first(); ，则是选取首个 <div> 元素。

    jQuery last() 方法
    last() 方法返回被选元素的最后一个元素。
    下面的例子选择 最后一个 <div> 元素中的最后一个 <p> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("div p").last();  
  • });  
    • 如果是  $("div").last(); ，则是选取最后一个  <div> 元素。

    jQuery eq() 方法
    eq() 方法返回 被选元素中带有指定索引号的元素。
    索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("p").eq(1);  
  • });  
    • 每看到一个方法，我都想瞎搞一下，比如试试 eq() 方法无参行不行呢。。。当然是不行的啦。。。。。。

    jQuery filter() 方法
    filter() 方法返回 匹配标准的所有元素。
    下面的例子返回带有类名 "intro" 的所有 <p> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("p").filter(".intro");  
  • });  

    • jQuery not() 方法
    not() 方法返回 不匹配标准的所有元素。
    提示：not() 方法与 filter() 相反。
    下面的例子返回不带有类名 "intro" 的所有 <p> 元素：
    [javascript] view plaincopy
  • $(document).ready(function(){  
  •   $("p").not(".intro");  
  • }); 

    • 总结

    以上是生活随笔为你收集整理的jQuery 遍历的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。