我正在尝试阅读一些使用以下表达式选择元素的JavaScript代码:
$("body > div:not(.layout-ignore):not(.ui-loader)")
我理解这是从 body 开始选择所有没有 .layout-ignore 和 .ui-loader 类属性的 div 元素,这个大于号(>)是用来表示在 body 元素内部选择的。能否有人解释一下这个语法?并给我一些在线文档的指引,以便更好地理解这个选择器表达式。谢谢。
我正在尝试阅读一些使用以下表达式选择元素的JavaScript代码:
$("body > div:not(.layout-ignore):not(.ui-loader)")
>
表示匹配的div
必须是body
的直接子元素。它被称为“child combinator”。因此,可能匹配的div
元素只能是body
的直接子级,不能在另一个中间元素内。所以:<body>
<div><!-- This div matches the selector -->
<div><!-- But this div does not --></div>
</div>
</body>
<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
这段代码是选择所有作为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 元素。
$("body > div:not(.layout-ignore.ui-loader)")
。 - Arun P Johny$('body').children('div').not('.layout-ignore, .ui-loader')
。 - Blender