这两个选择器之间的区别

Difference between these 2 selectors?

本文关键字：选择器 之间 区别 两个      更新时间：2023-09-26

在网页中，有多个div元素，其中一些元素的类为"class1"。

问题：下面的两个选择器会为我们提供类为class1的所有div元素吗？

$("div .class1")
$("div.class1")

第一个将选择一个具有类class1的元素，该类是div的后代。

<div>
    <p class="class1">text</p> <-- selected
</div>

第二个将选择具有类别class1的div。

<div class="class1">  <-- selected
    <p>text</p>
</div>

下面的两个选择器会给我们所有具有类的div元素吗第1类？

不，只有第二个$("div.class1")会。在jQuery和CSS中，类前面的空格表示您正在寻找该类的子元素。

这两个选择器做的事情非常不同。

此选择器：

$("div .class1")

将返回具有class1类并且是div的后代（直接或其他）的任何元素（无论元素类型如何）（无论该div的类（如果有的话）如何）。

此选择器：

$("div.class1")

将返回具有类别CCD_ 10的任何CCD_。

第一个选择器为您提供所有.class1元素，这些元素是任何<div>元素的后代。

第二个将为您提供实际上是<div>本身的所有.class1元素。

没有。

第一个将提供div中具有类class1的元素，第二个将提供具有类"class1"的div。

您发布的to选择器之间的区别在于元素层次结构。

假设你有一个这样的代码：

<div class="class1">
    This is a div with class name class1
</div>
<div>
    This is a div with no class name</div>
    <span class="class1">This is a span with class name class1</span>
<div class="class1">
    This is a div with class name class1
</div>
<div>
    This is a div with no class name
    <p class="class1">This is a paragraph with class name class1</p>
</div>
<div class="class1">
    This is a div with class name class1
</div>
<div class="class1">
    This is a div with class name class1
    <div class="class1">
        This is a div with class name class1
    </div>
 </div>

选择器$("div .class1")将返回类名为class1的<div>元素中的所有元素。在我们的示例中，这将是<span class="class1">...</span>、<p class="class1">...</p>和最后一个div <div class="class1">...</div>

而选择器$（"div.class1"）将返回类名为CCD_ 24的CCD_。在我们的示例中，这将是<div class="class1">的所有实例。

这里有一把小提琴可以帮助你了解更多：http://jsfiddle.net/fatgamer85/m99onozo/1/

希望这能有所帮助。

相关文章：