Question

我正在尝试阅读一些使用此表达式选择元素的JavaScript

$("body > div:not(.layout-ignore):not(.ui-loader)")

我从主体开始，但是大于（＆gt;）符号说选择body元素中没有.layout-ignore的所有div元素，也不是.ui-loader类属性？< / p>

任何人都可以向我解释这种语法吗？另请给我一些在线文档，帮助我进一步理解这个选择器表达式。

干杯

Answer 1

jQuery使用CSS选择器作为其基础。 MDN对于这些是什么以及它们如何工作有一个非常全面的指导。

请参见此处：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

在这里：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started

在您的示例中，它表示任何div（不是类.layout-ignore或.ui-loader），它是body的子级。意味着嵌套的div不会被选中。

希望这有帮助。

Answer 2

...是大于（>）符号说选择body元素中没有.layout-ignore的所有div元素，也不是.ui-loader类属性？

>表示匹配的div必须是body的直接子项。它被称为“child combinator”。因此，唯一可能匹配的div元素是body的直接子元素，它们不能位于另一个中间元素中。所以：

<body>
    <div><!-- This div matches the selector -->
        <div><!-- But this div does not --></div>
    </div>
</body>

两个:not限定符（即“negation pseudoclass”）表示div不能拥有类layout-ignore且不能拥有类ui-loader }。

所以总的来说：

<body>
    <div><!-- This div matches the selector --></div>
        <div><!-- But this div does not, it's not a direct child of body --></div>
    </div>
    <div class="layout-ignore"><!-- This does not because it has layout-ignore --></div>
    <div class="ui-loader"><!-- And neither does this, because it has ui-loader --></div>
</body>

Answer 3

body > div代码选择所有div作为正文的直接子代（http://devdocs.io/css/child_selectors）

<body>
    <div>first</div>
    <span>
        <div>second</div>
    </span>
</body>

（忽略html标记在这里无效）但是使用那个选择器它只会选择带有文本的div。

：not selector会排除其中的所有内容：http://api.jquery.com/not-selector/

<body>
    <div>first</div>
    <span>
        <div>second</div>
    </span>
    <div class="example"></div>
</body>

body>div:not(.example)使用body>div它会同时选择“第一个”div和.example，但会从集合中排除.example div。

理解JQuery Selector表达式

3 个答案: