jQuery - 后代的不同选择器？

Question

有人可以解释选择器如何为不同的后代工作吗？ 我看起来有点上网，但迄今为止发现的描述似乎并没有太大的不同。

例如，这三者有什么区别？

$('table tr') 
$('table > tr') 
$('table + tr') 

Answer 1

1. 匹配与标签的名字TR是表的后代的所有元素。
2. 匹配标签名为tr的所有元素，它们是表的直接子元素。
3. 匹配紧接在兄弟表之前的所有元素tr。

Answer 2

表TR是这样的坏榜样，因为你不能有不表中的TR，而也不必jQuery函数

p span 

这一个选择P内的所有span标签标记

p > span 

这一个p内仅选择所述第一嵌套范围标记

p + span 

只选择那个跨度标记，它在标记中的p后面出现

Answer 3

您不可能看起来非常困难，jQuery's documentation对于主题非常清晰。

鉴于一些简单的标记，

<div> 
    <span id="A"></span> 
    <p><br /><span id="B"></span></p> 

    <form> 
    <span id="C"></span> 
    <span id="D"></span> 
    </form> 
</div> 

这是选择将如何工作：

• $("div span")匹配任何跨度专区内，但远嵌套他们可能是一个div（A，B ，C，D）
• $("div > span")匹配跨度即时下降的div（A）
• $("br + span")匹配跨度下一个t ○BR（B）
• $("form span")匹配一个（C，d）
• $("form span:first")匹配仅第一跨度与形式（C）