类似的JQuery选择器的行为不同

Question

我有一个包含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">

Answer 1

[attributeName="attributeValue"]语法将选择attributeName正好为attributeValue的元素。

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

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

Answer 2

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