CODEWITHSUNDEEP
jqueryjquery-selectors
Dorsey
Dorsey

Reputation: 848

How can I learn how jQuery selectors work behind the scenes?

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?

Upvotes: 17

Views: 9413

Answers (5)

Guffa
Guffa

Reputation: 700592

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.

Upvotes: 4

Blazemonger
Blazemonger

Reputation: 92963

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.

Upvotes: 7

Alnitak
Alnitak

Reputation: 339927

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?

Upvotes: 0

Curtis
Curtis

Reputation: 103388

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/

Upvotes: 0

TeraTon
TeraTon

Reputation: 435

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/

Upvotes: 0

Related Questions