…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 library or framework. jQuery just seems to be the one library developers add before even starting. JavaScript 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 . Support for this one is pretty much IE 10+ with some caveats. See for more info on support. classList CanIUse // 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 to fix support when needed. Check out for more info on support. polyfills CanIUse fetch(’url’).then(function (response) {}).catch(function (error) {}); Another request library. My personal favorite is , but there are plenty of others out there. Axios 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 s 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. tool
