What is jQuery, and What is it Good For?
jQuery is everywhere; it’s the most popular JS library by far, it’s integrated into major systems like WordPress, and JS questions on StackOverflow seem to always have answers in jQuery.
The library offers shorthand for many JS functions used for manipulating the HTML DOM, which can often be long and annoying to type. jQuery offers much shorter and cleaner syntax, and when you’re typing
document.getElementByID() a hundred times, reducing that to a single character can save a lot on development time.
jQuery’s main allure is its selector function, used for finding elements in your HTML and getting a reference to them. For example, if you want to find an element by an ID, you can do:
Which is a lot easier to type than:
Of course, this isn’t the only way to select elements; jQuery can use nearly any CSS selector, all packaged in its
$ function. The
$ object also contains all other jQuery methods, like
document.querySelectorAll() function, so if you’re only using jQuery to type “
document.querySelectorAll()” a little less, you could forego jQuery by aliasing functions to
$, or anything else:
window.$ = document.querySelectorAll
But this isn’t all jQuery is good for; it is much better at working with DOM elements than vanilla JS, with traversal functions for parsing through a list of elements, and filters for search results. When selecting from HTML with vanilla JS, you’re given a list of the literal DOM elements, but jQuery will return jQuery objects with additional methods and properties, which may be useful to you.
jQuery has a few other features, like animation and AJAX support, but pure CSS animations are often much faster, and libraries like axios handle AJAX requests much better than jQuery does, so you should really only be using jQuery for working with the DOM. jQuery now offers a ‘slim’ version without these features, which saves about 6kb when using the gzipped and minified file.
Will jQuery Slow Down My Website?
If they don’t have it cached, you can use the minified and gzipped version, which is only 28.78 KB, probably less than the size of your HTML. This isn’t better than nothing, and may add another second or so to your page load on slow 3G connections (without a cache).
Be Aware of Janky Code
for loops rather than jQuery’s
each loops whenever you’re looping over a significant number of items. They’re both fast, but
each is much slower, despite being much more readable. Most of the added time comes from the delay at the end of the loop before the next one starts, so loops with a small amount of code and long length will see a greater performance hit than loops with a lot of code and a few elements.
jQuery selectors are slow. In fact, doing anything with the DOM is slow, so you’ll want to minimize the DOM related calls in your scripts. If you’re referencing an item multiple times, cache it in a variable:
var $item = $('#item')
This prevents jQuery from running multiple searches every time you use the
$() syntax to find an element. The
$ in front of the variable is convention for naming jQuery object variables, and isn’t required.
You can speed up jQuery’s selection by using IDs over classes wherever possible. Selecting by ID is much faster than selecting by class, since jQuery just wraps around the native
.getElementByID() method, rather than using its own selection engine. If you have to select by class, you should at least try to specify a context to tell jQuery where to look. For example, using:
Will be much faster than just searching for
'.class', since jQuery will ignore everything in the DOM except the
Should I Use jQuery?
jQuery is a library—not a framework. A library provides a few useful tools for you to use, or solves a problem that vanilla JS struggles with. A framework, like React or Vue, provides a more rigid structure, and controls most of how your application works.
jQuery has simple syntax and can make your development a lot easier. If you’re just adding a few simple things to your website, you probably don’t need it, but if you’re going to be doing a lot of dynamic content, jQuery can really speed up development time. If you’re new to JS development, learning jQuery can help you bootstrap simple applications.
In the context of a large app though, the benefits become blurrier. jQuery isn’t built to be the engine of large web apps, but it is often used in place of a more complicated framework for building simple dynamic pages. This works well for simple apps, but is very easy to outgrow. If you have a real need for jQuery to make your web app work, you probably also have a much greater need for the structure, modularity, and expandability offered by a full framework.
But, jQuery is much more performant than a huge framework like React, so if you want to stay closer to the metal, jQuery might be a good addition to clean up your code. If you’re working in an existing codebase, jQuery is easy to add, compared to a full framework which may take a lot of refactoring, learning, and updating. Plus, jQuery is just way simpler than most web frameworks, and doesn’t require you to rethink the way you code things.
jQuery is ultimately just a library for DOM manipulation, so if your use case requires more complex DOM manipulation than vanilla JS provides, jQuery might be for you.