jQuery Academy · 课时

高级属性选择器

Q: 「高级属性选择器」这节课中我会学到什么？

探索复杂的属性选择器，根据元素是否具有属性、属性值或部分匹配来定位元素，提升选择的精准度。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

探索复杂的属性选择器，根据元素是否具有属性、属性值或部分匹配来定位元素，提升选择的精准度。

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

您好，属性选择器！

欢迎学习 jQuery 中一种强大的元素选择方式！我们将深入了解属性选择器，它可以根据元素的 HTML 属性来选择元素。

您可以把属性理解为附加在 HTML 标签上的额外数据，例如 id、class、href、data-* 等。

根据属性是否存在进行选择

最简单的属性选择器可以找到具有某个属性的元素，而不论该属性的值是什么。它的写法是 [attributeName]。

当您只需要知道元素上是否存在某个属性时，这种选择器非常实用。例如，$('[title]') 会找到所有具有 title 属性的元素。

动手试试：属性是否存在

让我们使用属性存在选择器，找到所有具有 title 属性的元素，并显示它们的标签名称。

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

匹配完全相同的属性值

要选择属性具有完全相同值的元素，请使用 [attributeName="value"]。

这种选择器非常精确！只有当属性值与您指定的值完全一致时才会匹配，包括大小写（jQuery 的属性值匹配区分大小写）。

实际使用完全匹配

查找 data-type 属性值恰好为 "primary" 的元素。

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

以……开头的属性值

[attributeName^="value"] 选择器会查找属性值以特定字符串开头的元素。

它适合将命名规则相似的元素分组。
也非常适合筛选链接（例如，所有以 /products 开头的链接）。

以……结尾和包含指定内容的属性值

这些选择器可以更灵活地进行部分匹配：

[attributeName$="value"]：当属性值以指定字符串结尾时匹配。
[attributeName*="value"]：当属性值在任意位置包含指定字符串时匹配。

实时演示：部分匹配

观察 ^=、$= 和 *= 如何根据 href 属性中的部分属性值，匹配不同的元素。

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

单词和连字符选择器

还有两个专用选择器：

[attributeName~="value"]：当属性值包含由空格分隔的特定单词时匹配。通常用于 class 属性。
[attributeName|="value"]：当属性值恰好为 "value"，或以 "value-" 开头（后面跟连字符）时匹配。通常用于语言代码，例如 lang="en-US"。

快速检查：选择器

下面哪个 jQuery 选择器可以正确识别下方的 <div> 元素？

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

回顾：属性选择器

做得很好！您已经掌握了高级属性选择器：

[attr]：检查属性是否存在。
[attr="val"]：匹配完全相同的值。
[attr^="val"]：匹配以指定内容开头的值。
[attr$="val"]：匹配以指定内容结尾的值。
[attr*="val"]：匹配包含指定内容的值。
[attr~="val"]：匹配包含由空格分隔的指定单词的值。
[attr|="val"]：匹配完全相同或以“val-”开头的值。

使用这些选择器编写高度精确且高效的 jQuery 代码吧！

常见问题解答

「高级属性选择器」课时是免费的吗？

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

「高级属性选择器」这节课中我会学到什么？

探索复杂的属性选择器，根据元素是否具有属性、属性值或部分匹配来定位元素，提升选择的精准度。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

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

「高级属性选择器」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 jQuery Academy