jQuery Academy · 课时

高效遍历 DOM 的技术

掌握 .closest()、.siblings()、.find() 和 .parentsUntil() 等方法，高效遍历 DOM 树并避免性能瓶颈。

高效遍历 DOM 的技术 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

遍历 DOM 树

欢迎学习！在本课中，您将掌握在文档对象模型（DOM）中高效移动的技巧。

DOM 就像网页元素的家谱。理解如何遍历 DOM 后，即使元素没有直接的 ID 或类，您也能精确地选择它们。

遍历：跨越或穿过某个结构移动。
DOM：浏览器对 HTML 结构的内部表示。

使用 .find() 查找后代元素

.find()方法非常适合查找后代元素。它会在当前选定元素的*内部*搜索所有匹配项。

您可以把它想象成在一个特定的盒子里寻找特定物品。它非常适合缩小搜索范围。

语法：$(selector).find(filterSelector)
返回值：包含找到的后代元素的新 jQuery 对象。

.find() 实战

让我们查找特定无序列表（<ul>）中的所有列表项（<li>）。

尝试运行代码，看看哪些列表项会显示绿色背景！

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

使用 .closest() 向上查找

有时，您需要查找某个元素的祖先元素（父元素、祖父元素等）。.closest()方法正是用于此目的。

它从当前元素开始，沿 DOM 树*向上*遍历，并返回与所提供选择器匹配的*第一个*祖先元素。

语法：$(selector).closest(filterSelector)
返回值：包含距离最近的单个祖先元素的 jQuery 对象。

.closest() 实战

想象一下，您点击了嵌套结构深处的一个按钮，现在想找到它所属的主容器。.closest()非常适合实现这一点。

点击下面的按钮，突出显示距离它最近的<div>祖先元素。

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

使用 .siblings() 查找同级元素

DOM 树中处于同一层级的元素称为“同级元素”。.siblings()方法可以帮助您选择所有同级元素。

它会查找与当前元素拥有同一父元素的所有元素，但*不包括*当前元素本身。

语法：$(selector).siblings(filterSelector)
返回值：包含所有同级元素的新 jQuery 对象。

.siblings() 实战

让我们在点击某个列表项时突出显示它的所有同级元素。这对于交互式列表或菜单非常有用。

点击任意列表项，看看它的同级元素如何改变颜色！

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

使用 .parentsUntil() 向上遍历

如果您想选择*多个*祖先元素，但在某个位置停止，该怎么办？这时.parentsUntil()就很有用了。

此方法沿 DOM 树向上遍历，选择当前元素的所有祖先元素，*直到*到达选择器指定的元素。指定的“停止”元素本身不会包含在结果中。

语法：$(selector).parentsUntil(stopSelector, filterSelector)
返回值：包含所选祖先元素的 jQuery 对象。

.parentsUntil() 实战

我们有一个深度嵌套的结构。让我们选择<span>的所有父元素，直到遇到特定的<div class="container">。

运行此示例，看看哪些元素会获得边框，但请注意，“container” div 本身会被跳过！

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

快速检查

有一个<img>元素嵌套在<div class="gallery-item">中，而后者又位于<div class="gallery-row">中。如果您选择了<img>，应该使用哪个 jQuery 方法来获取*仅有的*<div class="gallery-item">？

回顾：高效遍历 DOM

做得很好！您已经掌握了用于高效遍历 DOM 的关键 jQuery 方法：

.find()：在元素*内部*搜索后代元素。
.closest()：沿树*向上*查找与选择器匹配的*最近祖先元素*。
.siblings()：选择与当前元素处于*同一层级*的所有元素（不包括当前元素本身）。
.parentsUntil()：选择多个祖先元素，直到指定的停止元素为止（但不包括该元素）。

合理使用这些方法，有助于您为动态 Web 应用编写更精确、性能更高且更易读的 jQuery 代码！

常见问题解答

「高效遍历 DOM 的技术」课时是免费的吗？

是的 — 「高效遍历 DOM 的技术」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「高效遍历 DOM 的技术」这节课中我会学到什么？

掌握 .closest()、.siblings()、.find() 和 .parentsUntil() 等方法，高效遍历 DOM 树并避免性能瓶颈。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「高效遍历 DOM 的技术」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy