When to use Vanilla JavaScript vs jQuery ? - GeeksforGeeks

09 Nov, 2021
Earlier, the websites used to be static. However, the introduction of vanilla JavaScript revolutionized the way websites used to look and function. Vanilla JS helped the developers in creating dynamic websites. Then came jQuery, a library of tools created by developers around the world, using Javascript.
In simple words, jQuery is a lightweight and easy to use JavaScript library that helps in creating complex functionalities with few lines of coding. jQuery helps in CSS manipulation, making AJAX requests, handling JSON data received from the server, and also helps in adding animation effects like hide, show etc to the components. The best part is that jQuery is browser flexible. This means the jQuery is compatible with every browser in the market, thus the developer need not have to worry about the browser that the user might be using.
jQuery simplifies a lot of things. It’s easier to implement some things using jQuery than vanilla JS. Have a look at this example. Here, we have to display a popup message on the screen, once the user clicks on the 'click here for popup!" button’.
jQuery Code:
<!DOCTYPE html><html>  <head>    <link rel="stylesheet"          href="styles.css">    <script src="app.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script></head>  <body>    <input id="button1" type="button"           value="click here for popup!" />      <script>        $('#button1').click(function() {            alert("GeeksforGeeks");        });    </script></body>  </html>
Output:
Before Clicking the Button:
After Clicking the Button:
JavaScript Code:
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="styles.css">    <script src = "app.js"></script></head>  <body>    <input id="button1" type="button"        value="click here for popup!"/>       <script>        document.getElementById("button1")            .addEventListener('click', function(){                 alert("GeeksforGeeks");            });    </script></body>  </html>
Output:
Before Clicking the Button:
After Clicking the Button:
It can be easily seen that the jQuery coding is shorter and much simplified than the vanilla JS code. Let’s glance at another example for better understanding.
Suppose the programmer want to select all elements with class name = 'hello'.Javascript
document.getElementsByClassName("hello");  
jQuery
$('.hello')
There is not a written rulebook that tells where to use jQuery and where to use JavaScript. It is said that jQuery is better for DOM manipulation than Javascript, however, after monitoring both of their performances, vanilla JS was found to be faster than jQuery. However, writing complex functionalities using Javascript may turn out to be difficult for novice programmers.
To put things in a nutshell, jQuery is a better option while working with CMS websites like WordPress, Weebly, etc. It makes development easier because of the huge library of plugins it already has. However, even though jQuery is made from Javascript, ignoring vanilla Javascript is not a wise decision. If you want to become a front end or a full stack web developer, then learning vanilla JS is a necessity. This is because Javascript has other frameworks and libraries like Angular, React, and Vue as well, which has a large number of advantages over jQuery. That’s why it is advised to first learn vanilla JS in-depth, as libraries and frameworks will come and go, but the base of all of them will always be vanilla JS. This is the reason why in an interview, a candidate knowing Javascript will hold an advantage over the other candidates knowing jQuery.
It must also be known that a person who’s learning vanilla JS will find it easier to switch to jQuery. However, switching to Javascript from jQuery may not seem smooth at first. As per a recent survey, it was observed that about 77 percent of the top 1 million websites on the internet use jQuery, learning the vanilla language first is always the best way to go forward.
davidbenalal
JavaScript-Misc
jQuery-Misc
Picked
JavaScript
JQuery
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?