You Truly Don’t Need jQuery
…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);// VanillaJs
function 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+)
// jQuery
const items = $('.item');// VanillaJS
const items = document.getElementsByClassName('item');
ID Selector (IE 6+)
// jQuery
const item = $('#item');// VanillaJS
const item = document.getElementById('item');
Query Selector (IE 9+)
// jQuery
const items = $('.list .item');
const lastItem = $('.item:last-item');// VanillaJS
const 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.
// jQuery
const item = $('#item')
item.addClass('new-class');
item.removeClass('new-class');// VanillaJS
const item = document.getElementById('item');
item.classList.add('new-class');
item.classList.remove('new-class');
Show/Hide Elements
// jQuery
const item = $('#item');
item.hide();
item.show();// VanillaJS
const 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.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
