0Pricing
jQuery Academy · 课时

构建自定义伪选择器

学习使用 jQuery.expr[':'] 注册自定义伪选择器，简化复杂的元素选择逻辑并提升代码可读性。

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

为什么需要自定义选择器？

jQuery 内置的选择器功能非常强大，但有时您会遇到复杂或重复的特定筛选需求。

这时，自定义伪选择器就能派上用场！它们允许您定义专用筛选器，简化复杂的选择逻辑，让代码更简洁、更易读。

默认选择器无法满足需求时

假设您经常需要选择所有不仅具有特定 class，而且其 data-status 属性还设置为 'active' 的 <div> 元素。

虽然可以组合标准选择器，但如果逻辑更加复杂，或者需要在应用中频繁使用，这种写法可能会变得冗长且不够直观。

认识 jQuery.expr[':']

jQuery.expr[':'] 是用于注册自定义伪选择器的对象。您可以将它理解为对 jQuery 核心选择引擎的扩展。

当 jQuery 遇到类似 :myCustomSelector 的选择器时，就会在此对象中查找 myCustomSelector。您需要为一个键（即选择器名称）指定一个函数，jQuery 随后会对它测试的每个元素执行该函数。

定义 `:has-tooltip`

下面定义一个简单的自定义选择器 :has-tooltip，用于识别具有 title 属性的元素。以下是将它添加到 jQuery.expr[':'] 的方法。

您提供的函数会接收当前正在测试的 DOM elem。如果元素符合条件，应返回 true，否则返回 false。

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

使用您的自定义选择器

现在已经定义了 :has-tooltip 选择器，我们就可以像使用其他 jQuery 伪选择器一样使用它！请尝试运行下面的示例。

它会突出显示所有具有 title 属性的元素，展示这个新自定义筛选器的强大功能。

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

`elem`、`i` 和 `match` 参数

自定义选择器函数执行时，会接收三个重要参数：

  • elem：当前正在测试的 DOM 元素。
  • i：elem 在 jQuery 当前遍历的元素集合中的索引。
  • match：一个数组，其中包含用于解析选择器的正则表达式所产生的结果。对于接受参数的选择器而言，这一点非常重要。

对于简单选择器，您主要会使用 elem 参数。

基于数据属性的选择器

让我们创建一个 :data-status(active) 选择器，用于查找 data-status 属性等于 'active' 的元素。这展示了如何使用 match 参数。

值 'active'（括号内的参数）会出现在 match[3] 中。这使您的选择器具有动态性！

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

理解 `match[3]`

match 数组是 jQuery 对您的选择器字符串进行内部正则表达式解析后得到的结果。对于类似 :yourSelector(argument) 的选择器，argument 部分通常会被捕获到 match[3] 中。

这种机制对于创建能够接受参数的动态、灵活的自定义选择器至关重要，可以让它们在各种筛选场景中更易复用且功能更强大。

高级逻辑：`:containsExact`

让我们构建一个更高级的选择器：:containsExact(text)。与 jQuery 默认的 :contains() 不同，它只会匹配文本内容（不包括子元素）与给定文本完全相同的元素。

这通常需要将 $(elem).text().trim() 仔细进行比较，以确保完全匹配。

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

自定义选择器的技巧

创建自定义选择器时，请牢记以下最佳实践：

  • 性能：复杂逻辑可能会影响性能，尤其是在大型 DOM 中。请优化您的选择器函数。
  • 清晰度：为选择器取清晰的名称，让任何阅读您代码的人都能立即了解其用途。
  • 可复用性：将它们设计得足够通用，使其能用于各种场景，而不只是某个特定场景。
  • 避免冲突：选择独特的名称，以防与未来的 jQuery 选择器或您可能使用的其他插件发生冲突。

自定义选择器挑战

您希望创建一个自定义选择器 :is-empty，用于选择没有文本内容且没有子元素的元素。这与 jQuery 内置的 :empty 选择器类似。

以下哪段代码能够正确地定义这个自定义伪选择器？

回顾：自定义选择器

在本课中，您学习了如何使用 jQuery.expr[':'] 创建自己的自定义伪选择器，从而扩展 jQuery 强大的选择功能。

您探索了如何定义简单选择器、通过 match 数组向选择器传递参数，以及使用选择器简化复杂的筛选逻辑，最终让您的 jQuery 代码更易读、更易维护且效率更高。

常见问题解答

「构建自定义伪选择器」课时是免费的吗？

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

「构建自定义伪选择器」这节课中我会学到什么？

学习使用 jQuery.expr[':'] 注册自定义伪选择器，简化复杂的元素选择逻辑并提升代码可读性。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

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

「构建自定义伪选择器」课时需要多长时间？

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

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

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

此课程中的所有课时

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