这两个 jQuery 选择器有什么区别？答案

【问题标题】：What's the difference between these two jQuery selectors?这两个 jQuery 选择器有什么区别？
【发布时间】：2009-11-09 21:40:55
【问题描述】：

使用此标记：

<div id="e">  
    <div id="f"></div>  
</div>

$('#e > #f') 的返回值是否与 $('#e #f') 相同？

【问题讨论】：

【解决方案1】：

parent > child 选择器只会寻找直接子元素，而ancestor descendant 会寻找任何后代元素。

例如，使用以下标记：

<div class="foo">
  <div>
    <div class="bar"></div>
  </div>
</div>

$('.foo > .bar') 不会找到 .bar 元素，而 $('.foo .bar') 会找到它，因为 .foo 不是来自 .bar 的直接子元素，但它是后代。

【讨论】：

【解决方案2】：

首先，我假设您的意思是 $('#e > #f') 和 $('#e #f')。

在您的示例中，它们都将返回相同的内容。不同之处在于$('#e #f') 在这种情况下也会返回一个 div：

<div id="e">
  <div id="g">
    <div id="f"></div>
  </div>
</div>

另一方面，

$('#e > #f') 不会在那里返回任何内容，因为它只选择其他元素的直接子元素。

【讨论】：

【解决方案3】：

这行不通，因为您没有指定要查找的元素。您需要输入 #e > #f 或 #e #f 来获取您的 ID。

如果这是一个真实的场景，#e > #f 只会找到孩子，没有嵌套在它下面。 #e #f 将抓取任何 id="f" 元素，无论它们在您的结构中嵌套多远。

【讨论】：

【解决方案4】：

在此示例中，是的，它们将返回相同的内容。

【讨论】：

【解决方案5】：

是的，因为 HTML 中没有 e 或 f 元素，它们将始终返回空的 jQuery 对象。

调用$('#e > #f') 将返回带有id="f" 的元素，如果它是带有id="e" 的元素的直接后代。

调用$('#e #f') 将返回带有id=f 的元素，如果它位于带有id="e" 的元素内部。

编辑：
注意：由于我回答后对问题进行了编辑，因此第一句话不适用于问题当前的样子。

【讨论】：