JavaScript vs jQuery

JavaScript Certification Training (3 Blogs) Become a Certified Professional

We have known JavaScript and JQuery for quite a few years. JavaScript was invented earlier than jQuery. Both are powerful and are used in web development and are used for the same purpose i.e. to make the web page interactive and dynamic. In other words, they bring life to the web pages. People may wonder that if they are used for the same purpose then why these two separate concepts? In this JavaScript vs jQuery article, we will find out which is better over the other in the following sequence:

JavaScript: A powerful language in web development
JQuery: A library developed from JavaScript
Why JQuery is created and what are the special capabilities of JQuery
Difference between JavaScript and JQuery with examples

JavaScript: A powerful language in web development

JavaScript is a scripting language that is used to add interactivity to our web pages. It is one of the three core technologies alongside HTML and CSS which are used to create web pages. While HTML and CSS define the structure of the web page and look/styling of web pages, JavaScript is used to make the web page dynamic by adding interactivity to it which means with JavaScript we can add some code for mouse click, mouse over and other events on the web page and lot more.

JavaScript is supported by all the web browsers and the web browsers have a built-in JavaScript engine to identify JavaScript code and work with it. Thus, JavaScript is majorly a client-side language. It is one language that can be used as a procedural language as well as a prototype-based object-oriented language. When we use primary JavaScript we are working with the procedural language while advanced JavaScript uses object-oriented concepts.

Let’s move on with our JavaScript vs jQuery and understand the library developed from JavaScript.

jQuery: A library developed from JavaScript

Over the years JavaScript has turned out to be a powerful language for web development. There are many libraries and frameworks which have come up which are built on top of JavaScript. These libraries and frameworks are developed to expand the capability of JavaScript, do lot of things with it and also to make the job of the developer easier. Check out Edureka’s Full Stack Developer Certification Course today to learn more.

jQuery is one such library of JavaScript which is built from it. It is the most popular JavaScript library invented by John Resign and was released on January 2006 at BarCamp NYC. jQuery is free, an open-source library, licensed under the MIT License. This has a powerful feature of cross-browser compatibility. It can easily handle cross-browser issues that we can face with JavaScript. Thus many developers use jQuery to avoid cross-browser compatibility issues.

Now let’s move on with our JavaScript vs jQuery blog and see why jQuery was created.

Ready to launch your UI/UX career? Enroll in our UI Design Course today!

Why jQuery is created and what are the special capabilities of jQuery?

In JavaScript, we have to write a lot of code for basic operations while with jQuery the same operations can be done with a single line of code. Therefore developers find it easier to work with jQuery than with JavaScript.

Though JavaScript is the basic language from which jQuery has evolved, jQuery makes event handling, DOM manipulation, Ajax calls much easier than JavaScript. jQuery also allows us to add animated effects on our web page which takes a lot of pain and lines of code with JavaScript.
jQuery has in-built plugins to perform an operation on a web page. We just have to include or import the plugin in our webpage to use it. Thus plugins allows us to create abstractions of animations and interactions or effects.
We can also make our custom plugin with jQuery. If we require an animation to be done on a web page in a certain way, we can develop a plugin according to the requirement and use it on our web page.
jQuery also has a high-level UI widget library. This widget library has a whole range of plugins that we can import on our webpage and use it for creating user-friendly web pages.

Let’s understand the difference.

Features	JavaScript	jQuery
Existence	JavaScript is an independent language and can exist on its own.	jQuery is a JavaScript library. It would not have been invented had JavaScript was not there. jQuery is still dependent on JavaScript as it has to be converted to JavaScript for the browser in-built JavaScript engine to interpret and run it.
Language	It is a high-level interpreted client-side scripting language. This is a combination of ECMA script and DOM (Document Object Model)	It is a light-weight JavaScript library. It has only the DOM
Coding	JavaScript uses more lines of code as we have to write our own code	jQuery uses fewer lines of code than JavaScript for the same functionality as the code is already written in its library, we just have to import the library and use the relevant function/method of the library in our code.
Usage	JavaScript code is written inside the script tag in a HTML page <script> </script>	We need to import the jQuery from CDN or from a location where the jQuery library is downloaded in order to use it. jQuery code is also written inside the script tag on the HTML page.
Animations	We can make animations in JavaScript with many lines of code. Animations are mainly done by manipulating the style of an Html page.	In jQuery, we can add animation effects easily with fewer lines of code.
User-friendliness	JavaScript can be cumbersome for the developer as it can take a number of lines of code to attain a functionality	jQuery is more user-friendly than JavaScript with few lines of code
Cross-browser compatibility	In JavaScript, we may have to deal with cross-browser compatibility by writing extra code or a workaround.	jQuery is cross-browser compatible. We don’t need to worry about writing any workaround or extra code to make our code compatible to a browser.
Performance	Pure JavaScript can be faster for DOM selection/manipulation than jQuery as JavaScript is directly processed by the browser.	jQuery has to be converted into JavaScript to make it run in a browser.
Event handling, Interactivity, and Ajax calls	All these can be done in JavaScript but we may have to write many lines of code.	All these can be done easily with jQuery with fewer lines of code. It is easier in jQuery to add interactivity, animations and also make ajax calls as the functions are already pre-defined in the library. We just use those functions in our code at the required places.
Verbosity	JavaScript is verbose as one has to write many lines of code for a functionality	jQuery is concise and uses fewer lines of code, sometimes only one line of code.
Size and Weight	Being a language, it is heavier than jQuery	Being a library, it is lightweight. It has a minified version of its code which makes it light-weight.
Reusability and Maintainability	JavaScript code can be verbose and therefore can be difficult to maintain and reuse.	With fewer lines of code, jQuery is more maintainable as we just have to call the predefined functions in the jQuery library in our code. This also makes us to easily reuse jQuery functions at different places in the code.

Moving on with the difference between JavaScript and jQuery with Example.

JavaScript vs jQuery with examples

Lets look into the examples.

Adding JavaScript and jQuery in our HTML document

JavaScript is added directly in the HTML document inside the tag or an external JavaScript file can be added in an HTML document using the src attribute.
Written directly inside the script tag:

&lt;script type="text/javascript"&gt;
  alert ("This alert box was called with the onload event");
&lt;/script&gt;

In order to use jQuery we download the file from its website and refer the path of the downloaded jQuery file in the src attribute of the SCRIPT tag or we can get it directly from CDN (Content delivery network).

&lt;head&gt;
&lt;script src="jquery-3.4.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

Using CDN:

&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

Let’s understand DOM Traversal and Manipulation

DOM Traversal and Manipulation

In JavaScript:

We can select a DOM element in JavaScript using the document.getElementById() method or by using the document.querySelector() method.

var mydiv = document.querySelector(“#div1”);

document.getElementById(“#div1”);

In jQuery:

Here, we will have to only use the $ symbol with the selector in brackets.


$(selector)

$(“#div1”) – The selector is an id ‘div1’

$(“.div1”) – The selector is a class ‘div1’

$(“p”) – The selector is the paragraph in the Html page

In the above statement, $ is a sign which is used to access jQuery, the selector is an HTML element.

Adding styles in JavaScript:

document.getElementById ('myDiv').style.backgroundColor="#FFF"

Adding styles in jQuery:


$('#myDiv').css (‘background-color','#FFF');

The #myDiv selector refers to the ‘myDiv’ identifier

DOM element selection and manipulation is much more concise in jQuery than in JavaScript.

Moving on with event handling.

Event Handling

In JavaScript, we select an HTML element:


document.getElementById ("#button1").addEventListener ("click”, myCallback);

function myCallback () {
console (“inside myCallback function”);
}

Here getElementById () method is used to select an element by its id, then we use the addEventListener () method to add an Event listener to the event. In this example, we add the myCallback function as a listener to the ‘click’ event.

We can also use an anonymous function in the above example:


document.getElementById ("#button1").addEventListener ("click”, function () {
   console.log (“inside the function”);
});

The eventListener can be removed by using the removeEventListener () method

document.getElementById (“#button1”).removeEventListener (“click”, myCallback);

In jQuery

jQuery has predefined events for almost all DOM actions. We can use the specific jQuery event for an action.


$(“p”).click (function () {
   // click action
});

Other examples are:


$(“#button1”).dblclick (function () {
// action for the double click event on the html element with id ‘button1’
}

The JQuery ‘on’ method is used to add one or more events to a DOM element.

$(“#button1”).on (“click”, function () {
// action here
});

We can add multiple events and multiple event handlers with on method.


$(“button1”).on ({
click: function () {
   // action here
},
dblclick: function () {
   // action here
}
});

Two or more events can have the same handler as below:

$(“#button1”).on (“click dblclick”, function () {
   // action here
});

Thus we see that with lesser and concise code, event handling is easier in jQuery than in JavaScript.

Moving on with Ajax Calls.

Ajax Calls

In JavaScript

JavaScript used an XMLHttpRequest object to send an Ajax request to a server. The XMLHttpRequest has several methods to make the Ajax call. The two common methods are open (method, URL, async, user, PSW), send () and send (string).
Let’s create an XMLHttpRequest first:


var xhttp = new XMLHttpRequest ();
Then use this object to call the open method:
xhttp.open ("GET", "D://getinfo.txt", true);
xhttp.send ();

The open method makes a get request to a server/location, the true specifies that the request is asynchronous. If the value is false, it means that the request is synchronous.

Making a post request:


var xhttp = new XMLHttpRequest ();
Then use this object to call the open method and make a post request:
xhttp.open ("POST", "D://postinfo.txt", true);
xhttp.send ();

To post data with the request, we use the setRequestHeader method of xhttp to define the type of data to be sent and the send method sends the data in key/value pairs:


xhttp.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); 
xhttp.send ("name=Ravi&surname=Kumar");

In jQuery

jQuery has several inbuilt methods to make Ajax calls. With these methods, we can call any data from the server and update a part of the webpage with the data. jQuery methods make Ajax call easy.
The jQuery load () method: This method fetches data from a URL and loads the data to an HTML selector.
$(“p”).load (URL, data, callback)
The URL is the location which is called for the data, the optional data parameter is the data (key/value pairs) we want to send along with the call and the optional parameter ‘callback’ is the method we want to execute after the load is completed.

The jQuery $.get () and $.post () method: This method fetches data from an URL and loads the data to a HTML selector.
$.get (URL, callback)
The URL is the location that is called for the data and the callback is the method we want to execute after the load is completed.

$.post (URL, data, callback)
The URL is the location which is called for the data, the data is the key/value pair/s we want to send with the call and the callback is the method we want to execute after the load is completed. Here the data and callback parameters are optional.

jQuery Ajax calls are more concise than JavaScript. In JavaScript, we are using an XMLHTTPRequest object, in jQuery we don’t have to use such an object.

Moving on with Animation.

Animation

In JavaScript

JavaScript does not have a specific animation function like jQuery animate() function. In JavaScript animation effect is mainly achieved by manipulating the style of the element or by using CSS transform, translate or animate properties. JavaScript also use the setInterval(), clearInterval(), setTimeout() and the clearTimeout() methods for animation effects.


setInterval(myAnimation, 4);

function myAnimation(){
document.getElementById ("#div1").style.transform=‘translate(100px, 100px)’;
document.getElementById ("#div1").style.transform=‘rotate(20deg)’;
}

Animation in JavaScript is mainly about manipulating the CSS properties.

In jQuery

jQuery has many inbuilt methods to add animations or effects on HTML elements. Let’s check a few of them.
The animate() method: This method is used to add animation on an element.


$("#button1").click (function () {
$("#div1 ").animate ({height: "300px"});
});

The show() method: This method is used to make an element visible from a hidden state.

$("#button1").click (function () {
$("#div1").show ();
});

The hide() method: This method is used to hide an element from a visible state.

$("#button1").click (function () {
$("#div1").hide ();
});

jQuery has its own methods to produce animation and effects in a webpage.

To sum up, JavaScript is a language for web development, jQuery is a library which has originated from JavaScript. JavaScript and jQuery have their own importance in web development.

Now that you know about JavaScript Loops, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).

Check out the Angular Course Online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React JS Certification Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “JavaScript vs jQuery” and we will get back to you.