Javascript 理解JQuery选择器表达式_Javascript_Jquery

Javascript 理解JQuery选择器表达式

javascript jquery

Javascript 理解JQuery选择器表达式,javascript,jquery,Javascript,Jquery,我试图阅读一些使用这个表达式选择元素的JavaScript $("body > div:not(.layout-ignore):not(.ui-loader)") 我知道它是从body开始的，但是否大于（>）符号表示选择body元素中没有.layout ignore和.ui loader类属性的所有div元素谁能给我解释一下这个语法吗？另外，请向我介绍一些在线文档，帮助我进一步理解这个选择器表达式 CheersjQuery使用CSS选择器作为基础。MDN对这些是什么以及它们是如何工作

我试图阅读一些使用这个表达式选择元素的JavaScript

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

我知道它是从body开始的，但是否大于（>）符号表示选择body元素中没有.layout ignore和.ui loader类属性的所有div元素

谁能给我解释一下这个语法吗？另外，请向我介绍一些在线文档，帮助我进一步理解这个选择器表达式

Cheers

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

请看这里：

在这里：

在您的示例中，它表示作为body子级的任何div（不属于class.layout ignore或.ui loader）。这意味着不会选择嵌套的div

希望这有帮助

…是否大于（>）符号表示选择body元素中不具有.layout ignore和.ui loader类属性的所有div元素

表示匹配的

div

必须是

body

的直接子级。它叫“a”。因此，唯一可能匹配的

div

元素是

body

的直接子元素，它们不能位于另一个中间元素中。因此：

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

body>div

代码是选择body（）的直接子级的所有div


第一
第二

（忽略html标记在这里无效）但使用该选择器，它只会首先选择包含文本的div

：not选择器将排除其中的所有内容：


第一
第二

body>div:not（.example）

使用

body>div

它将选择“第一个”div和.example，但将

.example

div从集合中排除。

它可以写为

$（“body>div:not（.layout ignore.ui loader）”）

它可能更容易写为

$（'body'）。children（'div'）。not（'.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>

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

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