jQuery - разные селекторы для потомков?

Question

Может кто-нибудь объяснить, как работают селекторы для разных потомков? Я немного посмотрел в Интернете, но описания, которые я нашел до сих пор, не выглядят ужасно разными.

Например, в чем разница между этими тремя?

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

Answer 1

1. Соответствует всем элементам с именем тега tr, которые являются потомками таблицы.
2. Соответствует всем элементам с именем тега tr, которые являются прямыми дочерними элементами таблицы.
3. Соответствует всем элементам tr, непосредственно предшествующим таблице родного брата.

Answer 2

Вы не могли бы выглядеть ужасно тяжело, Документация jQuery довольно ясна по этому вопросу.

Учитывая некоторую простую разметку,

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

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

Вот как будет работать select:

• $("div span") соответствует любому промежутку внутри div, как бы далеко он ни был связан с div, они могут быть (A, B, C, D)
• $("div > span") соответствует пролетам, которые являются непосредственными потомками div (A)
• $("br + span") соответствует интервалу рядом с br (B)
• $("form span") соответствует диапазонам в форме (C, D)
• $("form span:first") соответствует только первому диапазону с формой (C)

Answer 3

таблица tr плохой пример для этого, потому что вы не можете иметь tr без таблицы, а также не нужна функция jquery

p span

этот выбирает все теги span внутри тега p

p > span

этот выбирает только первый вложенный тег span внутри p

p + span

выбирает только тот тег span, который идет сразу после p в вашей разметке