JavaScript vs jQuery: Key Differences You Need to Know

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
  • Adding JavaScript and JQuery in our HTML document
  • DOM Traversal and Manipulation
  • Event Handling
  • Ajax Calls
  • Animation

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.

JavaScript vs jQuery

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:

<script type="text/javascript">
  alert ("This alert box was called with the onload event");
</script>

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

<head>
<script src="jquery-3.4.1.min.js"></script>
</head>

Using CDN:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

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”);

or

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.