Question

下面的三个jQuery选择器都有相同的结果。有什么区别？

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
  $('p > span').css('color','red');
OR
  $('span', 'p').css('color','red');
OR
  $('p span').css('color','red');
</script>

</body>
</html>

Answer 1

$('span', 'p')和$('p span')相同，无论深度如何，都会选择任何p元素后代的span元素。

另一方面，

$('p > span')将选择作为p元素的直接子元素的span元素。因此，例如，此选择器将不选择以下示例中的span元素：

<p>
    <a href="#">
        <span>Test</span>
    </a>
</p>

..而另外两个会选择它就好了。

Answer 2

不同之处在于p > span仅在范围是该段落的直接后代时才匹配。

鉴于此标记：

<p><div><span>Hello</span>, how are you?</div></p>
<p>Me? I'm <span>good</span>.</p>

选择器p > span只匹配第二段中的范围。

Answer 3

首先是child-selector

其次是multiple-selector

第三是descendant-selector

所有链接都是jquery API

$（'x＆gt; y'），$（'y'，'x'）和$（'x y'）之间有什么区别？

3 个答案: