…and you really shouldn't use it if you don’t absolutely need to.
Disclaimer: This is not meant to be an anti-jQuery article. All of the points made can be applied to any JavaScript library or framework. jQuery just seems to be the one library developers add before even starting.
Every now and then I come across an article that mentions picking up JavaScript that also mentions learning jQuery right away. I would say this is not the best advice. jQuery should be treated like any other library, and should only be added when it is needed.
There is a lot of argument to not use jQuery at all now. Most of the native DOM API’s that JavaScript offers are supported by all modern browsers (IE9+), and are faster than jQuery. If they are not available in the target browser the workarounds are easy enough to implement without jQuery.
Below are some commonly used jQuery methods, and their counterparts in native JavaScript.
Document Ready
// jQuery$(document).ready(readyCb);or$(readyCb);
// VanillaJsfunction docReady(cb) {if (document.readyState != 'loading'){ cb(); } else { document.addEventListener('DOMContentLoaded', cb); } }
docReady(readyCb);
Selectors
The performance of each is listed here: JSPERF.
Spoiler Alert the VanillaJS selector is faster than the jQuery counter part every time.
Class Selector (IE 9+)
// jQueryconst items = $('.item');
// VanillaJSconst items = document.getElementsByClassName('item');
ID Selector (IE 6+)
// jQueryconst item = $('#item');
// VanillaJSconst item = document.getElementById('item');
Query Selector (IE 9+)
// jQueryconst items = $('.list .item');const lastItem = $('.item:last-item');
// VanillaJSconst items = document.querySelectorAll('.list .item');const lastItem = document.querySelector('.item:last-item');
Adding/Removing Classes (IE 10+)
To add and remove classes with VanillaJS you can use classList . Support for this one is pretty much IE 10+ with some caveats. See CanIUse for more info on support.
// jQueryconst item = $('#item')item.addClass('new-class');item.removeClass('new-class');
// VanillaJSconst item = document.getElementById('item');item.classList.add('new-class');item.classList.remove('new-class');
Show/Hide Elements
// jQueryconst item = $('#item');item.hide();item.show();
// VanillaJSconst item = document.getElementById('item');item.style.display = 'none';item.style.display = '';
AJAX
For replacing $.ajax you have a few options
XMLHttpRequest (XHR)
This has the best browser support, but the API really isn’t the most intuitive.
const xhr = new XMLHttpRequest();xhr.addEventListener("load", function() { // response can be used here});xhr.open('GET', 'url');xhr.send();
Fetch
Fetch is supported by most major browsers, but IE and Safari Support is not quite there (Safari is coming for Mac). There are some good small polyfills to fix support when needed. Check out CanIUse for more info on support.
fetch(’url’).then(function (response) {}).catch(function (error) {});
Another request library.
My personal favorite is Axios, but there are plenty of others out there.
axios.get(’url’).then(function(response) {}).catch(function(failedResponse) {});
If you want more examples check out youmightnotneedjquery.com .
You might still want to use it
jQuery is one of those tools that was almost a necessity when browsers were not standard, but the browsers for the most part have standardized on most APIs and are adding support much quicker than in the past. This is not to say jQuery still doesn’t have it’s place, but you should not default to using it for every project just because it is jQuery.