Как я могу узнать, как селектора jQuery работают за кулисами?
Например, когда мы используем $('div span')
, как jQuery выполняет такой поиск для нас?
Выполняет ли поиск элемента span
сначала или div
?
Кажется, что на официальном сайте jQuery нет объяснений по этим вопросам; он просто показывает нам, какие функции доступны через API.
Я хочу знать, как реализуется селектор jQuery для каждого типа, поэтому я могу выбрать лучший селектор для использования.
Вы знаете, где я могу получить такую информацию?
Ответы
Ответ 1
В общем, что вам нужно знать:
Вы также можете прочитать официальную документацию Sizzle, но на самом деле она не обсуждает методы оптимизации.
Ответ 2
Сначала он ищет элементы span
. Он анализирует селектор как:
- Любой элемент с tagName = span
- Наличие предка с именем tagName = div
В первой части он может использовать метод getElementsByTagName
для нахождения всех элементов span
, тогда он должен прокрутить предков каждого, чтобы искать элементы div
.
Ответ 3
Самое простое место для поиска - прямое чтение источника. Загрузите источник uncompresserd с сайта jquery и прочитайте из исходного источника, что он делает и в каком порядке.
http://jquery.com/download/
Ответ 4
Как @Juhana прокомментировал, если вы хотите знать конкретные методы, используемые jQuery для выбора объектов на основе его селекторов, посмотрите на репозиторий github:
https://github.com/jquery/jquery/
В качестве альтернативы посмотрите исходный код, доступный в несжатой загрузке jQuery:
http://jquery.com/download/
Если вы просто хотите знать, какие разные селекторы доступны для вас, jQuery предоставляет их список здесь:
http://api.jquery.com/category/selectors/
Ответ 5
Они анализируются справа налево.
См. http://csswizardry.com/2011/09/writing-efficient-css-selectors/ и Почему браузеры соответствуют селекторам CSS справа налево?