When to use Vanilla JavaScript vs jQuery ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet"
          href="styles.css">
    <script src="app.js"></script>
    <script src=
    </script>
</head>
  
<body>
    <input id="button1" type="button"
           value="click here for popup!" />
  
    <script>
        $('#button1').click(function() {
            alert("GeeksforGeeks");
        });
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking the Button:
  • After Clicking the Button:

JavaScript Code:

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


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.

jQuery vs Javascript

JavaScript jQuery
A weakly typed dynamic programming language. A rich, lightweight, and easy to use JavaScript library.
A scripting language used for creating dynamic websites user friendly interfaces. JS framework used to handle AJAX requests, manipulate CSS, and create animations like as slide, hide etc.
All the coding has to be done from scratch. Might turn out to be difficult and time consuming for novice programmers. jQuery has several pre-written functions. Only the necessary modifications has to be made. Saves a lot of time.
Developers have to take care of multi browser compatibility. Browser related errors are more like to appear. jQuery works with all modern browsers. There is no such compatibility issue with any browser.
No additional plugins are required to run JS. Do not need to add any additional plugins as all browsers support JavaScript. jQuery library script link has to be included inside the head tag of the webpage.
Long line of code. May lead to spaghetti codes. Less coding is required to do the same work.
DOM can be accessed faster. It is best for complex operations where developers usually make mistakes and write poor lines of code.
Not easy to learn. Learning curve is steep. Comparatively easier to learn.

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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.