了解jQuery选择表达

我想读一些JavaScript正在使用此表达了解jQuery选择表达

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

我得到的选择元件（S），其起始于身体，但是，大于号（>）符号说选择body元素中所有不具有.layout-ignore且不含.ui-loader类属性的div元素？

任何人都可以向我解释这个语法吗？同时指出一些在线文档可以帮助我进一步理解这个选择器表达式。

Cheers

来源

2013-09-23 user1333524

它可以写成'$（“body> div：not（.layout-ignore。ui-loader）“）' –

将它写成'$（'body'）。children（'div'）。not（'。layout-ignore，.ui-loader'）'可能更容易。 – Blender

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

在您的例子这意味着任何股利（即类的不.layout，忽视或的.ui装载机），这是身体的孩子。含义嵌套div不会被选中。

希望这会有所帮助。

来源

2013-09-23 04:49:32

...是否大于（>）符号表示选择body元素中的所有div元素没有.layout-ignore，也没有.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>

来源

2013-09-23 04:53:38

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

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

（忽略HTML标记无效点击这里）但是对于那个选择器，它只会首先选择文本。

的：不选择将在它排除一切：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股利。

来源

2013-09-23 04:53:47 voigtan

了解jQuery选择表达

回答

相关问题