How JQuery select elements under the hood?

Question

I was wondering how jquery really works internally. For example I want to know how jquery selectors works under the hood ? Does it loop through all DOM elements ? Or it has another magic algorithm for finding elements ?

And how does it differs from .find() and .filter() functions ?

Do you guys have any idea ?

Use this to make browsing jquery's source easier: http://james.padolsey.com/jquery/ — techfoobar, Jan 18 '14 at 04:56
Regarding .find() and .filter(): http://stackoverflow.com/questions/2438223/jquery-confusion-in-figuring-out-the-difference-between-find-and-filter — Jonathan Lonowski, Jan 18 '14 at 04:59

score 0 · Answer 1 · answered Jan 18 '14 at 05:17

jQuery uses pretty much the same principles as browsers themselves when they need to apply style rules from elements - scan all elements and check against all rules declared in CSS.

And so does jquery:

for each element in given subtree/input set do
  if element matches selector do 
     add element to output set
  end if
end for
return output set

So the task has computational complexity of O(N) where N is a number of DOM elements in input set.

There are quite few tricks/optimizations possible but in general it is as complex as that.

Some jQuery selectors have even worse complexity, for example this $( "li:has(ul)") selector has computation complexity of O(N*N) so use with care.

How JQuery select elements under the hood?

1 Answers1