Ian Marshall logo

Ian Marshall

Are jQuery and JavaScript the same? And which should I use?

Are they the same? The short answer is "yes, they're the same" in that jQuery is a library written in JavaScript and intended to work in the browser where JavaScript already works by default. Briefly, jQuery recreates some of JavaScript's core functionality with a different syntax that used to make JavaScript easier to use—at least way back in 2006, when it was introduced.

And that brings us to the long answer, which is "no, they're not the same." The jQuery library is an abstraction layer above vanilla JavaScript, essentially a Frankenstein-like reenvisioning of JavaScript in the way John Resig and the jQuery team imagined it should be. And Resig was right: many—if not all—of us JavaScripters used jQuery joyously from the beginning. However, jQuery as a higher evolution of JavaScript is frozen in time. JavaScript's ES5 implementation came out in 2009 with a slew of core functionality that mimicked Resig's successful library, validating his original vision, but also meeting the jQuery challenge in making JavaScript's more common functionality easier to use. Then came HTML5 in 2014 and ES6 in 2015 which added nitro fuel to JavaScript, sending it speeding far beyond the shambling jQuery creation.

So which should you use? Well, let's compare using the three significant 2006 innovations of jQuery: easier DOM manipulation, AJAX, and animation.

jQuery gave us DOM referencing by CSS selector, and we were ecstatic. But ES5 gave us querySelector() and querySelectorAll(), which outdid jQuery by additionally supporting all CSS3 selectors. Thereafter, DOM manipulation was at least as easy using vanilla JS as jQuery, and ultimately better with vanilla because the 100k jQuery abstraction layer wasn't required for the job. Vanilla JS 1, jQuery 0.

The $.ajax() syntax in jQuery was indeed the greatest thing since sliced bread, especially its callback implementation. But there's a new sliced bread in town. ES6 gave us the indomitable fetch(), Promises, and async/await, which do a better job of handling not only AJAX, but any asynchronous task. Vanilla JS 2, jQuery 0.

HTML5 completely rebuilt how the three technologies (HTML, CSS, and JavaScript) worked in the browser, including the addition of a dedicated CSS animation engine. To use it, though, animations needed to be CSS-driven, not JavaScript-driven. So the current best practices involve changing class names using JavaScript, triggering the CSS animation, and that's it. Rewriting an element's style attribute using JavaScript should be avoided, if performance is important (which it is). And that means not using jQuery's animation system, unfortunately. Vanilla JS 3, jQuery 0.

I adored jQuery. It was great fun to use, and I was completely dedicated to it for about five wonderful years. But jQuery is now an obsolete library. Its spotlight has dimmed, its curtain drawn. Give it its much deserved star on the web technology Walk of Fame. But legacy code using jQuery should be updated, and no new code should be propped up by the jQuery crutch.