Jak mogę się dowiedzieć, w jaki sposób selektory jQuery działają za kulisami?

Question

Na przykład, kiedy używamy $('div span'), w jaki sposób jQuery robi takie wyszukiwanie dla nas?

Czy najpierw szuka elementu span, czy div?

Wygląda na to, że strona oficjalna jQuery nie ma żadnego wyjaśnienia; pokazuje nam tylko, jakie funkcje są dostępne za pośrednictwem interfejsu API.

Chcę wiedzieć, w jaki sposób każdy typ selektora jQuery jest zaimplementowany, więc mogę wybrać najlepszy selektor do użycia.

Czy wiesz, gdzie mogę uzyskać takie informacje?

Answer 1

Najprostszym miejscem do wyszukiwania byłoby czytanie bezpośrednio ze źródła. Pobierz nieskompresowane źródło z witryny jQuery i odczytaj z surowego źródła, co robi i w jakiej kolejności.

http://jquery.com/download/

Answer 2

Jak @Juhana skomentował, jeśli chcesz dowiedzieć się konkretnych metod jQuery używa do zaznaczania obiektów na podstawie jego selektorów, spojrzeć na repozytorium github:

https://github.com/jquery/jquery/

Alternatywnie, wygląd przy kodzie źródłowym dostępnym w nieskompresowanym pobieraniu jQuery:

http://jquery.com/download/

Jeśli chcesz tylko wiedzieć, jakie są dostępne dla Ciebie różne przełączniki, jQuery zawiera listę nich tutaj:

http://api.jquery.com/category/selectors/

Answer 3

Oni analizowany od strony prawej do lewej.

Zobacz http://csswizardry.com/2011/09/writing-efficient-css-selectors/ i Why do browsers match CSS selectors from right to left?

Answer 4

Ogólnie, co trzeba wiedzieć:

1. jQuery czyta selektorów from right to left.
2. Using an exact ID is fastest, a następnie użycie dokładnej nazwy tagu, ponieważ używają one zoptymalizowanych metod natywnych w języku JavaScript.
3. Natywne selektory CSS, takie jak :first-child, to faster than jQuery selectors, takie jak :first.

Można również przeczytać official Sizzle documentation, ale tak naprawdę nie omawia ona technik optymalizacji.

Answer 5

Najpierw szuka elementów span.Analizuje selektor jak:

1. Każdy element z tagName = rozpiętość
2. uwzględniając przodka z tagName = strefa

Na pierwszej części może użyć metody getElementsByTagName znaleźć wszystkie span elementów, następnie musi przechodzić przez przodków każdego z nich, aby wyszukać elementy.