Problem
I’ve heard that the way jQuery queries and manipulates items in the DOM is its best asset: you can use CSS queries to generate complicated inquiries that would be difficult to achieve in conventional javascript. However, document.querySelector or document.querySelectorAll, which are supported in Internet Explorer 8 and above, can achieve the same result.
So, why ‘risk’ jQuery’s overhead if its most valuable feature can be done with pure JavaScript?
I’m aware that jQuery offers more than simply CSS selectors, such as cross-browser AJAX, good event attaching, and so on. However, jQuery’s querying capabilities are a significant component of its overall strength!
Any thoughts?
Asked by Joel Blum
Solution #1
document.querySelectorAll() has a number of bugs and isn’t supported in older browsers. This is unlikely to pose any problems currently. It contains an unintuitive scoping technique as well as a few other flaws. Also, interacting with the result sets of these queries is more difficult with javascript, which is something you might want to do in many circumstances. Filter(), find(), children(), parent(), map(), not(), and other jQuery functions can be used to work with them. Not to mention the fact that jQuery can use pseudo-class selectors.
However, I would consider other aspects like “working” on the dom (events, styling, animation, and manipulation) in a crossbrowser compatible fashion or the ajax interface to be jQuery’s best features.
If you only need a jQuery selector engine, you can use the one that jQuery uses: Sizzle. That way, you get the benefits of jQuery’s Selector engine without the drawbacks.
ord, I’m a big supporter of plain JavaScript. Nonetheless, there are situations when you’ll require 10 lines of JavaScript instead of 1 line of jQuery.
Of course, you must be diligent in order to avoid writing jQuery in this manner:
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();
This is extremely hard to read, while the latter is pretty clear:
$('ul.first')
.find('.foo')
.css('background-color', 'red')
.end()
.find('.bar')
.css('background-color', 'green')
.end();
The comparable JavaScript, as shown in the pseudocode above, would be significantly more complex:
1) Locate the element and decide whether to take all or just the first.
// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");
2) Use some (potentially nested or recursive) loops to iterate over the array of child nodes and check the class (classlist not available in all browsers!)
//.find('.foo')
for (var i = 0;i<e.length;i++){
// older browser don't have element.classList -> even more complex
e[i].children.classList.contains('foo');
// do some more magic stuff here
}
3) Put the css style into action
// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"
This code would require at least twice as many lines of code as jQuery. You’d also have to consider cross-browser concerns, which would jeopardize the native code’s significant speed advantage (along with its dependability).
Answered by Christoph
Solution #2
If you’re optimizing your page for Internet Explorer 8 or newer, you should really examine whether or not you need jquery. Many of the assets that jquery supplies are native to modern browsers.
If you worry about performance, native javascript can provide significant gains (2-10 times faster): http://jsperf.com/jquery-vs-native-selector-and-element-style/2
The results of converting a div-tagcloud from jquery to native javascript (IE8+ compatible) are stunning. With only a little overhead, you can go four times quicker.
Number of lines Execution Time
Jquery version : 340 155ms
Native version : 370 27ms
You May Not Require For each browser version, Jquery provides a nice breakdown of which native methods are replaced.
http://youmightnotneedjquery.com/
Appendix: Additional speed comparisons of native vs. jquery methods
Answered by Pascalius
Solution #3
It’s crucial to understand where we’re coming from if you want to understand why jQuery is so popular.
IE6, Netscape 8, and Firefox 1.5 were the most popular browsers a decade ago. There were few cross-browser techniques to select an element from the DOM back then besides Document.getElementById ().
When jQuery was first launched in 2006, it was a game-changer. Because of its flexibility and browser support, jQuery set the standard for how to easily pick / alter HTML elements and trigger events back then.
Many of the features that made jQuery so popular have now been incorporated into the javaScript standard, more than a decade later:
Back in 2005, these weren’t widely available. The fact that they are now begs the question of why we should utilize jQuery in the first place. Indeed, many individuals are beginning to question whether we should use jQuery at all.
So, if you think you know JavaScript well enough to get by without jQuery, go for it! Don’t feel compelled to utilize jQuery just because everyone else is!
Answered by John Slegers
Solution #4
Because jQuery is capable of far more than querySelectorAll, this is the case.
To begin with, jQuery (and, in particular, Sizzle) works in earlier browsers that don’t support CSS2, such as IE7-8. There are 1-3 selectors.
Furthermore, Sizzle (the selection engine behind jQuery) provides a number of more powerful selector instruments, such as the:selected pseudo-class, an advanced:not() selector, and a more complex syntax like $(“>.children”), among others.
And it does it seamlessly across all browsers, taking advantage of everything jQuery has to offer (plugins and APIs).
Yes, if you think you can rely on simple class and id selectors, jQuery is too much for you, and you’d be paying an exaggerated pay-off. However, if you don’t and want to benefit from all of jQuery’s features, you should use it.
Answered by MaxArt
Solution #5
le by itself. This is a really basic wheel to create.
Here are a few examples from the source that demonstrate what jQuery(w/ Sizzle) can do for you:
Safari quirks mode:
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "<p class='TEST'></p>";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
If that guard fails, it falls back to a version of Sizzle without querySelectorAll. There are special handles for anomalies in Internet Explorer, Opera, and the Blackberry browser further down.
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id === match[3] ) {
return makeArray( [ elem ], extra );
}
} else {
return makeArray( [], extra );
}
If all else fails, it will return the oldSizzle result (query, context, extra, seed).
Answered by KGZM
Post is based on https://stackoverflow.com/questions/11503534/jquery-vs-document-queryselectorall