Old question, but half a decade later, it’s worth revisiting. Here I am only discussing the selector aspect of jQuery.
document.querySelector[All] is supported by all current browsers, down to IE8, so compatibility is no longer an issue. I have also found no performance issues to speak of (it was supposed to be slower than
document.getElementById, but my own testing suggests that it’s slightly faster).
Therefore when it comes to manipulating an element directly, it is to be preferred over jQuery.
is vastly superior to:
In order to do anything at all, jQuery has to run through a hundred lines of code (I once traced through code such as the above to see what jQuery was actually doing with it). This is clearly a waste of everyone’s time.
The other significant cost of jQuery is the fact that it wraps everything inside a new jQuery object. This overhead is particularly wasteful if you need to unwrap the object again or to use one of the object methods to deal with properties which are already exposed on the original element.
Where jQuery has an advantage, however, is in how it handles collections. If the requirement is to set properties of multiple elements, jQuery has a built-in
each method which allows something like this:
var $elements=$('h2'); // multiple elements
which some find daunting.
jQuery selectors are also slightly different, but modern browsers (excluding IE8) won’t get much benefit.
As a rule, I caution against using jQuery for new projects:
- jQuery is an external library adding to the overhead of the project, and to your dependency on third parties.
- jQuery function is very expensive, processing-wise.
- jQuery imposes a methodology which needs to be learned and may compete with other aspects of your code.
This makes no mention of other features of jQuery. However, I think that they, too, need a closer look.