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

Question

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

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

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

Answer 1

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

Answer 2

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

p span

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

p > span

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

p + span

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

Answer 3

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

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

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