16

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?

Keavon
  • 6,837
  • 9
  • 51
  • 79
Dorsey
  • 854
  • 3
  • 9
  • 17
  • The definitive answer is here: https://github.com/jquery/jquery/ – JJJ Jul 24 '12 at 13:18
  • 1
    check the jQueru sourcecode http://code.jquery.com/jquery-latest.js – Shyju Jul 24 '12 at 13:19
  • 3
    And in the case of specific selectors, the definitive answer is often here: https://github.com/jquery/sizzle/ – James Allardice Jul 24 '12 at 13:19
  • 3
    On the other hand if you're choosing your selectors based on which one does the search most efficiently, you're probably doing totally irrelevant micro-optimizing. – JJJ Jul 24 '12 at 13:20

5 Answers5

7

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.

Community
  • 1
  • 1
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
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.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

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/

TeraTon
  • 435
  • 6
  • 15
0

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/

Community
  • 1
  • 1
Curtis
  • 101,612
  • 66
  • 270
  • 352
0

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?

Community
  • 1
  • 1
Alnitak
  • 334,560
  • 70
  • 407
  • 495