В чем разница между $ ('x> y'), $('y', 'x') и $ ('x y')?

#javascript #jquery

Вопрос:

Три нижеприведенных селектора 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>

Ответ №1:

$('span', 'p') и $('p span') идентичны, оба будут выбирать любые элементы span, которые являются потомками любого элемента p, независимо от глубины.

$('p > span') с другой стороны, будут выбраны элементы span, которые являются прямыми дочерними элементами элемента p. Так, например, этот селектор не выбрал бы элемент span в следующем примере:

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

.. в то время как два других выбрали бы это просто отлично.

Ответ №2:

Разница в том, что p > span совпадает только в том случае, если интервал является прямым потомком абзаца.

Учитывая эту разметку:

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

селектор p > span будет соответствовать только интервалу во втором абзаце.

Ответ №3:

Первый — это дочерний селектор

Второй — это множественный выбор

Третий — это селектор-потомок

Все ссылки относятся к jquery API

1. Нет, второй не является множественным селектором, это два селектора, где второй используется как контекст для первого. Множественный селектор был бы $('span, p') , который, конечно, не дает того же результата, что и другие.