How can I learn how jQuery selectors work behind t

Question

For example, when we use $('div span'), how does jQuery do such a search for us?

Does it search for the span element first or the div?

It seems that the jQuery official site has no explanation on these things; it just show us what's functions are available through the API.

I want to know how every type jQuery selector is implemented, so I can select the best selector to use.

Do you know where I can get such info?

Answer 1

As @Juhana has commented, if you want to know the specific methods jQuery uses to select objects based on its selectors, look at the github repository:

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

Alternatively, look at the source code available in the uncompressed jQuery download:

http://jquery.com/download/

If you just want to know what different selectors are available for you, jQuery provides a list of them here:

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

Answer 2

They're parsed from right to left.

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

Answer 3

The simplest place to look for would be reading straight from the source. Download the uncompresserd source from jquery site and read from the raw source what it does and in which order.

http://jquery.com/download/

Answer 4

It searches for the span elements first. It parses the selector as:

1. Any element with tagName = span
2. Having an ancestor with tagName = div

For the first part it can use the getElementsByTagName method to find all span elements, then it has to loop through the ancestors of each to look for div elements.

Answer 5

Broadly, what you need to know:

1. jQuery reads selectors from right to left.
2. Using an exact ID is fastest, followed by using an exact tag name, because they use optimized JavaScript-native methods.
3. Native CSS selectors like :first-child are faster than jQuery selectors like :first.

You can also read the official Sizzle documentation, but it doesn't really discuss optimization techniques.