logo标签列表

理解JQuery选择器表达式

javascriptjquery
3

我正在尝试阅读一些使用以下表达式选择元素的JavaScript代码：

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

我理解这是从 body 开始选择所有没有 .layout-ignore 和 .ui-loader 类属性的 div 元素，这个大于号（>）是用来表示在 body 元素内部选择的。能否有人解释一下这个语法？并给我一些在线文档的指引，以便更好地理解这个选择器表达式。谢谢。
2
它可以写成 $("body > div:not(.layout-ignore.ui-loader)")。 - Arun P Johny
可能更容易将其编写为$('body').children('div').not('.layout-ignore, .ui-loader')。 - Blender
3个回答
4
3
“...是表示选择body元素内没有.layout-ignore和.ui-loader类属性的所有div元素的大于(>)符号吗？” >表示匹配的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>
3

body > div 这段代码是选择所有作为body的直接子元素的div标签（http://devdocs.io/css/child_selectors）

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

(忽略这里的html标记不合法) 但是使用该选择器，它只会选择文本为“first”的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 元素，但是排除了具有类名 .example 的 div 元素。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接