3

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

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

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

谁能向我解释这种语法？还可以向我指出一些在线文档，这些文档可以帮助我进一步理解这个选择器表达式。

干杯

4

3 回答 3

4

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。

希望这可以帮助。

于 2013-09-23T04:49:32.200 回答
3

...是大于 (>) 符号表示选择 body 元素中没有 .layout-ignore 也没有 .ui-loader 类属性的所有 div 元素？

>也就是说，匹配的必须div是 的直接子级body。它被称为“子组合器”。所以唯一div可能匹配的元素是 的直接子元素body，它们不能在另一个中间元素内。所以：

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

两个:not限定词（它们是“否定伪类”）是说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>
于 2013-09-23T04:53:38.593 回答
3

body > div代码选择所有 div 是 body 的直接子级（http://devdocs.io/css/child_selectors）

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

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

:not 选择器将排除其中的所有内容：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。

于 2013-09-23T04:53:47.360 回答