Post
Ask Question

Do You Really Need jQuery?

Introduction

 
Okay, First let me apologize for the clickbait title,  and the second thing is,  I'm not against jQuery. It's a great library and makes the job of writing code very easy. However, it can prove to be overkill in certain situations, especially if you're performing just some basic operations like selecting elements, adding styles or classes, or toggling the visibility of elements in the dom. In this article, we'll take a look at 10 places where you can simply ditch jQuery and go with old school vanilla JavaScript.
 

The ready method

 
As the official documentation for jQuery mentions the ready method is used to test the readiness of the document and the code added to the callback function of the ready method will be executed once the document object model (DOM) is ready i.e loaded.
  1. // jQuery  
  2. $(document).ready(function() {  
  3.   // do something!  
  4. });  
You could easily replace the above code by using the DOMContentLoaded event.
  1. // Vanilla JavaScript  
  2. document.addEventListener('DOMContentLoaded', function() {  
  3.   // do something! 
  4. })  
Note: DOMContentLoaded is different from the load event in JavaScript. The DOMContentLoaded event is triggered when the initial HTML is loaded. The load event is fired when the whole webpage is loaded including resources like images and the stylesheets.
 

Selecting Elements

 
Selecting DOM elements is one of the most important tasks that jQuery performs. You could simply use $() or jQuery() to select a specific element.
  1. // jQuery  
  2. $(".product");  
The above code will select all the instances of .product element from the dom.
 
You could utilize JavaScripts built-in querySelector or querySelectorAll methods to the same thing.
  1. // Vanilla JavaScript
  2. document.querySelector(".product");  
  3. document.querySelectorAll(".product");  
 querySelector selects the first instance of .product element whereas the querySelectorAll selects all the instances of .product element.
 

Dealing with events

 
There are literally dozens of ways you could add events to various elements in jQuery including click, on, live, mouseenter, keydown, etc. 
  1. // jQuery  
  2. $("#delete").click(function(){ /* on click */ });      
  3. $("input").keydown(function(){ /* on key down */ });      
  4. $(".user").on("mouseover", function () { /* on mouse over */ });  
In JavaScript, you could simply use the addEventListener method to do the same.
  1. // Vanilla JavaScript  
  2. document.querySelector("#delete").addEventListener("click", (e) => { /* on click */ });  
  3. document.querySelector("input").addEventListener("keydown", (e) => { /* on key down */ });  
  4. document.querySelector(".user").addEventListener("mouseover", (e) => { /* on mouse over */ });  

Toggle Visibility (Hide and Show elements) 

 
jQuery comes bundled with the hide and the show methods which as the name suggests lets you show or hide the elements on the DOM.
  1. // jQuery  
  2. $(".product").hide();  
  3. $(".product").show();  
While JavaScript out of the box doesn't provide any feature to hide or show elements, you could easily find a way around this by using the CSS display property.
  1. // Vanilla JavaScript  
  2. document.querySelector(".product").style.display = "none";    
  3. document.querySelector(".product").style.display = "block";  

Working with CSS classes

 
JavaScript comes bundled with classList property which could be utilized to add, remove or toggle CSS classes.
 
Here's how jQuery deals with CSS classes,
  1. // jQuery  
  2. $(".user-info").addClass("active");
  3. $(".user-info").removeClass("active");
  4. $(".user-info").toggleClass("active"); 
You could do the same thing using the classList property.
  1. // Vanilla JavaScript  
  2. document.querySelector(".user-info").classList.add("active");          
  3. document.querySelector(".user-info").classList.remove("active");          
  4. document.querySelector(".user-info").classList.toggle("active");   

Searching for child elements

 
jQuery can be used to search for the child elements within a selected element. it comes with a built-in method for this called the find to do the same.
  1. // jQuery          
  2. const wrapper = $(".wrapper");   
  3. wrapper.find(".product");
You can do the same thing using querySelector or querySelectorAll methods in JavaScript.  
  1. // Vanilla JavaScript      
  2. const wrapper = document.querySelector(".wrapper");
  3. wrapper.querySelector(".product");

Determine if an element has a class

 
jQuery comes bundled with a method called hasClass which could be used to determine if a specific element is utilizing a specific class.
  1. // jQuery  
  2. $(".product").hasClass("active"); 
You could do the same thing using JavaScript's classList.contains method.
  1. // Vanilla JavaScript  
  2. document.querySelector(".product").classList.contains("active");  

Styling DOM elements

 
Adding inline styles is one of the most common usages of jQuery. It comes with a built-in method called css to do the same. which lets you add inline styles to your elements dynamically.
  1. // jQuery  
  2. $(".product").css("background-color", "red");    
You could use the style property to do the same in Vanilla JavaScript. 
  1. // Vanilla JavaScript  
  2. document.querySelector(".product").style.backgroundColor = "red";  

Dynamic elements

 
JavaScript provides a createElement method that lets you generate new elements on the fly.
  1. // jQuery  
  2. const newDivEl = $('<div/>')  
  3.   
  4. // Vanilla JavaScript  
  5. const newDivEl = document.createElement('div')  

Working with attributes

 
jQuery provides a single property called attr which could set as well as get attributes of an element. 
  1. // jQuery  
  2. $('#logo').attr('alt', 'My Logo');
You could do the same in JavaScript using setAttribute and getAttribute properties. As the names suggest, setAttribute is used to add the specified attribute to an element whereas the getAttribute is used to get the value of an HTML attribute. JavaScript also provides a removeAttribute method which lets you remove an attribute from an element. 
  1. // Vanilla JavaScript  
  2. document.querySelector("#logo").setAttribute("alt", "My Logo");    
  3. document.querySelector("#logo").getAttribute("alt");    
  4. document.querySelector("#logo").removeAttribute("alt");   

TL;DR

  1.  The DOMContentLoaded could be used to check if the initial HTML structure of a webpage is loaded before executing a script.
  2. The querySelector and querySelectorAll could be used to select elements from the DOM. querySelector selects the first element from the DOM whereas querySelectorAll selects all the instances from the DOM.
  3. addEventListener could be used to listen to specific events on the DOM elements.
  4. The style property could be used to change the visibility of an element by updating its display property.
  5. The classList property could be used to add or remove classes on a specific DOM element.
  6. The querySelector and querySelectorAll could be used to search for child elements of a specific DOM element.
  7. The classist property provides a contains method that could be used to check if an element has a specific class.
  8. The style property could be used to apply inline CSS styles to DOM elements.
  9. The createElement method could be used to create dynamic elements on the fly.
  10. The getAttribute, setAttribute, and removeAttribute could be used to get, add, or remove HTML attribute from a DOM element.


Similar Articles