0Pricing
jQuery Academy · 课时

使用 .not() 排除元素

掌握 .not() 方法，精准地从匹配集合中排除特定元素，优化选择结果并避免对某些元素执行意外操作。

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

`.not()` 简介

欢迎学习！在本课中，您将掌握 jQuery 强大的 .not() 方法。它对于优化元素选择非常重要。

.not() 方法可以从匹配的元素集合中排除特定元素，让您精确控制哪些元素会受到操作影响。

按选择器字符串排除

使用 .not() 最常见的方式是传入一个 CSS 选择器字符串。随后，jQuery 会从当前选择结果中移除与这个新选择器匹配的所有元素。

  • 首先进行广泛选择。
  • 然后使用 .not() 筛除不需要的元素。

当先选择“所有元素”，再指定要“移除”的元素更方便时，这种方式非常有用。

使用类选择器调用 .not()

试试下面的示例。我们将先选择所有 div 元素，然后使用 .not() 排除带有 .special 类的元素。只有不具有该特殊类的 div 元素会被设置样式。

<!DOCTYPE html>
<html>
<head>
<style>
  .red { color: red; }
</style>
</head>
<body>
  <div class="box">Item 1</div>
  <div class="box special">Item 2</div>
  <div class="box">Item 3</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all .box divs, then exclude the one with .special
      $('.box').not('.special').addClass('red');
    });
  </script>
</body>
</html>

排除特定元素

除了选择器字符串之外，您还可以直接向 .not() 传入一个 DOM 元素或一个 jQuery 对象。

如果您已经获得了希望从当前选择结果中排除的确切元素（或多个元素）的引用，这种方式会非常方便。

使用元素引用调用 .not()

在此示例中，我们选择所有列表项（<li>）。然后通过其 ID（#item2）确定一个特定项，并使用 .not() 将其从设置样式的操作中排除。

<!DOCTYPE html>
<html>
<head>
<style>
  .bold { font-weight: bold; }
</style>
</head>
<body>
  <ul>
    <li>List Item 1</li>
    <li id="item2">List Item 2</li>
    <li>List Item 3</li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // Select all <li>, then exclude the specific #item2
      $('li').not($('#item2')).addClass('bold');
    });
  </script>
</body>
</html>

使用函数实现自定义排除

对于高度动态或复杂的排除逻辑，您可以向 .not() 传入一个函数。

  • 该函数会针对当前集合中的每个元素运行。
  • 如果函数返回 true，则会排除该元素。
  • this 表示当前正在处理的 DOM 元素。

使用函数调用 .not() 的示例

在这里，我们希望设置所有段落的样式，但排除包含“exclude”一词的段落。该函数会检查每个段落的文本内容。

<!DOCTYPE html>
<html>
<head>
<style>
  .italic { font-style: italic; }
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p>This paragraph contains 'exclude'.</p>
  <p>Another normal paragraph here.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('p').not(function() {
        // Exclude paragraphs containing 'exclude'
        return $(this).text().includes('exclude');
      }).addClass('italic');
    });
  </script>
</body>
</html>

链式调用 .not() 实现精确选择

您可以链式调用多个 .not()，也可以将 .not() 与其他筛选方法组合使用，从而创建非常精确的选择结果。

每次调用 .not() 都会进一步优化当前元素集合，逐步移除更多不需要的元素。您可以把它想象成逐层剥离不需要的元素。

何时使用 .not()

在以下情况下，.not() 非常有用：

  • 您进行了广泛的初始选择，希望移除少数特定类型的元素。
  • 您需要排除一个已经拥有直接引用的元素。
  • 表达“除了这些元素以外的所有元素”可以让代码更清晰、更易读。

这是一种优雅的缩小选择范围的方式，无需预先编写复杂的否定选择器。

快速检查：使用 .not()

请考虑以下 HTML。哪段 jQuery 代码能够正确地选择所有 <p> 元素，但不包括 ID 为 "intro" 的元素？

<div>
  <p>Paragraph 1</p>
  <p id="intro">Introduction</p>
  <p>Paragraph 3</p>
</div>

回顾：掌握 .not()

您已经成功掌握了 jQuery 的 .not() 方法！

我们了解到，.not() 可以通过以下方式排除元素，从而优化选择结果：

  • CSS 选择器字符串（例如 .not('.hide')）
  • 特定的 DOM 元素或 jQuery 对象（例如 .not(myElement)）
  • 用于实现自定义动态排除逻辑的函数。

请继续练习，让您的 jQuery 选择更加精确、高效！

常见问题解答

「使用 .not() 排除元素」课时是免费的吗？

是的 — 「使用 .not() 排除元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「使用 .not() 排除元素」这节课中我会学到什么？

掌握 .not() 方法，精准地从匹配集合中排除特定元素，优化选择结果并避免对某些元素执行意外操作。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

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

「使用 .not() 排除元素」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 构建自定义伪选择器
  2. 使用 .filter() 进行高级筛选
  3. 使用 .not() 排除元素
← 返回 jQuery Academy