When to use Vanilla JavaScript vs jQuery ?

Last Updated : 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:

javascript

<!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:

javascript

<!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.

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.

Scroll to the top of the page using JavaScript/jQuery

sanchit496

Improve

Article Tags :

When to use Vanilla JavaScript vs jQuery ?

jQuery vs JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?