В чем разница между селектором потомка и селектором has в jQuery?

Question

В чем разница между потомком селектора и : имеет селектор ?

Из документации:

Селектор потомков

Описание: Выбирает все элементы, которые являются потомками данного предка.

Потомком элемента может быть ребенок, внук, правнук и т. Д. Этого элемента.

: есть

Описание: Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору.

Выражение $('div:has(p)') соответствует <div>, если <p> существует где-то среди его потомков, а не просто как прямой потомок.

Даже после прочтения объяснения, разница мне не ясна. Может кто-нибудь помочь мне понять?

Answer 1

Селектор потомков в div p выбирает p потомков div.

Селектор :has() в div:has(p) выбирает div, если он содержит какие-либо элементы p.

Жирные части - это все, что вам нужно знать. Остальные можно рассматривать как простые условия относительно того, какие элементы этих типов выбраны.

---

В терминах селектора CSS, ключевой селектор - самый правый внешний простой селектор. Тип элементов, которые выбирает jQuery (или анализатор CSS браузера), - это тот, который находится в селекторе ключей.

В первом селекторе клавишей является p, потому что это самый правый, встречающийся после комбинатора-потомка (пробел). Это означает, что будет возвращена коллекция p элементов.

В случае :has(), который является псевдоклассом, p является «внутренним» простым селектором, который является частью :has() псевдокласса , а не частью весь «внешний» селектор. Поэтому ключ в этом селекторе div, а не p. Это означает, что будет возвращена коллекция div элементов, а не p элементов в первом селекторе.

Answer 2

Селектор descendants выберет фактических потомков , а селектор :has выберет родительский элемент (элементы), которые содержат элемент в has ().