jQuery Academy · 课时

伪类与自定义选择器

理解 :has()、:not() 和 :nth-child() 等内置伪类，然后学习创建自定义选择器，以便复用元素筛选逻辑。

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

解锁伪类的强大功能

欢迎来到高级选择器课程！今天，我们将探索伪类。伪类是添加到选择器中的特殊关键字，用于定义所选元素的特殊状态。

它们可以定位那些无法通过标准 HTML 属性或名称轻松选择的元素。
您可以把它们理解为用于筛选选择结果的动态过滤器。

伪类以冒号（:）开头，例如 :hover 或 :first-child。

按位置定位：:nth-child()

:nth-child()伪类会根据元素在同级元素组中的位置来选择元素。它对于设置列表或表格行的样式非常实用。

:nth-child(n)：选择第 n 个子元素。
:nth-child(odd)：选择编号为奇数的子元素。
:nth-child(even)：选择编号为偶数的子元素。

计数从 1 开始，第一个子元素的编号为 1。

使用 :nth-child(odd/even) 设置样式

下面来看看如何使用:nth-child(odd)和:nth-child(even)快速应用交替样式，例如为列表创建斑马纹效果。

尝试运行此示例，看看效果：

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

:nth-child() 高级公式

您可以在:nth-child()中使用更复杂的公式，例如An+B。其中，A表示循环间隔大小，B表示偏移量。

:nth-child(3n)：选择每第 3 个子元素（第 3、6、9 个……）。
:nth-child(3n+1)：选择第 1、4、7 个……子元素。

这样，您就可以非常精确地按间隔选择元素。

使用 :not() 排除元素

:not()伪类允许您从选择结果中排除特定元素。它就像是在说：“选择所有段落，但排除带有‘intro’类的段落。”

它以另一个选择器作为参数：:not(selector)。
您可以利用它优化现有选择结果，而不必编写复杂的新选择器。

在实践中使用 :not()

假设您想为除第一个列表项之外的所有列表项添加边框。:not(:first-child)非常适合实现这一需求。

看看:not()如何帮助我们排除第一个列表项：

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

使用 :has() 选择父元素

:has()伪类很独特：如果某个元素包含至少一个与参数中选择器匹配的元素，它就会选择该元素。

它就像是在说：“给我所有内部包含<p>标签的<div>元素。”
这样，您就可以根据子元素的特征选择父元素。

使用 :has() 突出显示

假设您只想突出显示包含图像的<div>容器。使用:has('img')即可高效实现。

运行这段代码，看看哪个 div 会获得边框：

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

自定义选择器：扩展 jQuery

如果 jQuery 内置的选择器不够用，该怎么办？您可以创建自己的自定义伪选择器！这样，您就能根据高度特定的自定义逻辑筛选元素。

您可以使用jQuery.expr[':']注册它们。
这样可以让选择代码更简洁，并且能够重复使用。

对于真正独特的筛选需求，这是一个高级功能。

构建自定义 :contains-word()

让我们创建一个名为:contains-word()的自定义选择器，用于查找包含特定完整单词的元素，而不仅仅是包含某个子字符串。

此示例会定义:contains-word()，然后使用它：

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

伪类挑战

请考虑以下 HTML：

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

哪个 jQuery 选择器可以只定位“Two”和“Four”？

回顾：伪类与自定义选择器

您已经掌握了强大的 jQuery 选择技巧！

伪类（例如:nth-child()、:not()和:has()）可以根据元素的状态或它与其他元素的关系来选择元素。
:nth-child()根据位置定位元素，也支持使用公式。
:not()从选择结果中排除元素。
:has()根据子元素选择父元素。
您甚至可以使用jQuery.expr[':']创建自己的自定义伪选择器，实现高度特定的筛选。

继续练习这些技巧，进一步掌握 DOM 定位！

常见问题解答

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

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

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

理解 :has()、:not() 和 :nth-child() 等内置伪类，然后学习创建自定义选择器，以便复用元素筛选逻辑。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 jQuery Academy