类似的 JQuery 选择器作用不同答案

【问题标题】：Similar JQuery selectors acting differently类似的 JQuery 选择器作用不同
【发布时间】：2020-01-06 11:57:52
【问题描述】：

我有一个包含 10 个 div 的页面，其中包含“topic_t”类。代码如下：

console.log(jQuery(".topic_t").length);
console.log(jQuery('*[class="topic_t"]').length);

产生结果：

10
0

console.log(jQuery(".topic_t").length);
console.log(jQuery('*[class="topic_t"]').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>
<div class="apple baker charly topic_a topic_t"></div>

为什么第二个 jquery 选择器没有找到任何 div？例如，我的 div 定义如下：

<div class="apple baker charly topic_a topic_t">

【问题讨论】：

标签： javascript jquery css-selectors

【解决方案1】：

语法[attributeName="attributeValue"] 将选择具有恰好attributeValue 的attributeName 的元素。

*[class="topic_t"] 将选择类属性为完全 topic_t 的任何元素。相反，当您使用. 语法来选择一个类时，它将选择具有该类子字符串的任何元素在空格分隔的类列表中（在class 属性中）。

因此，使用. 选择具有特定类的元素通常更可靠（并且更短），尤其是在可能还存在其他类的情况下。

【讨论】：

【解决方案2】：

因为class="topic_t" 表示选择class 属性等于"topic_t" 的任何元素。这并不意味着选择任何具有 class 属性的元素 includes class "topic_t":

例如，当您的 div 的 class 属性设置为 "topic_t" 时，以下工作：

console.log(jQuery('*[class="topic_t"]').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="topic_t"></div>

如果您使用包含选择器 (~=)，它将按预期工作（其行为类似于 .class 选择器）：

console.log(jQuery('*[class~="topic_t"]').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="apple baker charly topic_a topic_t"></div>

【讨论】：