Difference Between JavaScript And jQuery Explained With Examples

Shivani Goyal

0 min read

Difference Between JavaScript And jQuery Explained With Examples

0 min read

Table of content:

What is JavaScript and How Does it Work?
What is jQuery and How Does it Work?
Difference Between JavaScript and jQuery
Advantages and Disadvantages of Javascript
Advantages and Disadvantages of jQuery
Examples of JavaScript and JQuery
Conclusion

JQuery is a lightweight JavaScript library that embodies the "write less, do more" spirit. They are both used in web development to add interactive elements to web pages and make them dynamic for a better user experience. This leads many to believe that there is no difference between JavaScript and jQuery. In this article, we will bust this myth and discuss jQuery vs JavaScript, what these two entail, and more. Let's get started by looking at what is JavaScript and how it works.

What is JavaScript and How Does it Work?

JavaScript (JS) is one of the most widely used client-side scripting languages. It runs on the client's machine in the client-side browser to produce engaging web pages. Designed by Brendan Eich, JS is an interpreted language and hence does not need a compiler to translate the code.

JS clubbed with HTML and CSS is used to define the structure, appearance, and dynamism of pages in a web development project. Think of HTML as the architecture of a house, CSS as furnishing, and JS as the doors and functionality features that help us move around as we like, etc. In other words, it is an essential part of client-side web development that facilitates the creation of attractive UI for optimum user interaction. Given that JS is a primary client-side programming language, almost all modern browsers have a built-in JavaScript engine making them compatible with JavaScript code.

What is jQuery and How Does it Work?

Developed by John Resig jQuery is a cross-platform JavaScript library built for rapid web development. It isn't a programming language but a powerful web development tool that minimizes the need for multiple lines of coding in JavaScript. This cross-platform scripting library simplifies CSS animation, HTML document traversal, event handling, and Ajax.

In other words, it makes it easier to create standard user interfaces and also takes care of cross-browser compatibility issues. A lot of common tasks which ideally require lines of code written in JavaScript can be managed with a single line of code with the help of jQuery. And fewer lines of code mean they are easier to manage and reuse.

Difference Between JavaScript and jQuery

With the brief about JS and jQuery and the mechanism behind them, out of the way, we will discuss the difference between JavaScript and jQuery in more detail. Take a look at the JavaScript and jQuery difference table below for this:

Basis	JavaScript	jQuery
Origin	Developed by Brendan Eich in 1995 as a powerful scripting language at Netscape Communications.	Developed by John Resig in 2006 at BarCamp NYC as a JavaScript library for Document Object Model (DOM) manipulation.
Type	The basic jQuery and JavaScript difference comes from the fact that JS is an independent language that is an integral part of client-side development.	jQuery on the other hand is not a separate programming language, but an application programming interface (API).
Language	The client-side languageis a hybrid of DOM and ECMA script.	This multi-browser library contains only DOM.
Code	Users need to code from scratch and have to hence write lengthy codes when working with JS.	Users can import codes from the jQuery library by calling predefined methods/ functions. Users hence have to write minified versions/ fewer lines of code.
Multi-browser compatibility	Does not have built-in multi-browser capabilities hence users need to write additional code for a variety of browsers.	It has multi-browser capabilities and hence inherently takes care of browser compatibility issues without the need for extra code.
User-friendly	It is less user-friendly in comparison and more overwhelming since developers have to write multiple lines of code.	It is more user-friendly since developers have to write fewer lines of code.
DOM Element	It is comparatively slower in DOM creation. But is faster for DOM selection/ manipulation.	It is comparatively quicker in DOM creation.
Time	It is more time-consuming since users have to write their own scripting code.	It is less time-consuming since users can import codes from JQuery libraries.
Speed	JS can be directly processed by a multitude of browsers, hence is faster.	jQuery needs to be converted to JS and is hence slower in comparison.
Animation	Creating animation in JS calls for multiple lines of code.	Creating/ adding animation with jQuery is easier and calls for fewer lines of code.
Size/ Weight	It is a high-level interpreted programming language and is hence heavier in comparison.	It contained minified codes and is hence a lightweight JS library.
Event handler & browser interactivity	It is comparatively difficult to induce event handling and interactivity in JS.	Predefined functions/ event methods in jQuery make it easier to take care of event handling and interactivity.
Reuse & Maintenance	It is quite verbose, i.e. has many lines of code and is hence difficult to reuse and maintain.	It isn't as verbose and is easier to reuse and maintain.
Syntax	Users can simply start writing JavaScript code without the need for any special symbols to define the programming language.	Users need to use special symbols to define jQuery with the dollar sign ($) at the beginning and a semicolon (;) at the end. Also, the basic syntax to follow within the event handler function is $(selector).action();.

This compiles the difference between JavaScript and jQuery. To get a well-rounded understanding of jQuery vs JavaScript let's look at their pros and cons, and some examples.

Advantages and Disadvantages of Javascript

Advantages	Disadvantages
Easier to learn even for beginner developers. It is easier to discover and repair errors in JS. You can link site components with a single mouse click. Is compatible with most modern web browsers and systems. Is comparatively lighter and quicker than other programming languages.	Comparatively more vulnerable to malicious programs/ attacks. Some (though rarely) browsers might not have an in-built JavaScript engine. Users need to write large chunks of code snippets to gain browser compatibility. May produce different results depending upon the website/ platform, resulting in heterogeneity.

Also read- Top 50+ JavaScript Interview Questions And Answers

Advantages and Disadvantages of jQuery

Advantages	Disadvantages
It is small and lightweight. The minified codes imply it is more efficient to use jQuery for most applications and complex operations. Browser errors can be handled simply by incorporating remedies into the library. Is inherently cross-browser compatible. Allows Ajax scripts to communicate with the server and change content without having to reload the page.	A high number of jQuery functions can slow the client down. All jQuery functionalities might not be available to the user, even if needed for the website. Users might need to write lengthy JS codes to compensate for missing functionalities.

Examples of JavaScript and JQuery

We have clearly stated the difference between JavaScript and jQuery in this article. But there is something about looking at examples that helps deepen the understanding of the concepts. To facilitate this, here are 3 examples of jQuery vs JavaScript.

Example 1

In this example of jQuery vs JavaScript, we will add JavaScript and jQuery to our HTML content. There are two ways to add JS files to HTML content- one is by using the src property, and the other is by using tags to directly place JS in HTML doc.

The following is written immediately inside the script tag:

<script type="text/javascript">
alert ("This calls the alert box when the event loads");
</script>

To use jQuery, we either download the file from its website and refer to the location of the downloaded jQuery file in the SCRIPT tag's src attribute, or we may receive it straight through CDN (Content delivery network).

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

We can clearly see the difference between JavaScript and jQuery in reference to how we can add them to HTML. Now let's take another example.

Example 2

One of the points of difference between JavaScript and jQuery was that JS was quicker in the creation of DOM in comparison to jQuery, as shown in the example above. In the following example, we will show how to select/ manipulate DOM elements for jQuery vs JavaScript.

Using JavaScript to add styles:

document.getElementById ('div_one').style.backgroundColor="#fff"

Using jQuery to add styles:

$('#div_one').css (‘background-color','#fff');

The identifier 'div_one' is referenced by the #div_one selector.

This example verifies that it is easier to select and manipulate DOM elements in jQuery, as stated in the difference between JavaScript and jQuery table earlier.

Example 3

This jQuery vs JavaScript example describes the methods of creating animations in the two approaches. Take a look at the code snippets below and their explanations.

The animation effect in JavaScript is mostly produced by modifying the element's style or by using CSS transform, translate, or animate attributes. For animation effects, JavaScript uses the setInterval(), clearInterval(), setTimeout(), and clearTimeout() functions.


          setInterval(animat_one, 3);
 
function animat_one(){
document.getElementById ("#div_one").style.transform=‘translate(80px, 80px)’;
document.getElementById ("#div_one").style.transform=‘rotate(30deg)’;
}

As seen above, the major focus of animation in JS is to manipulate CSS attributes. To understand another difference between JavaScript and jQuery, let's consider how we create animation with jQuery. There are many built-in features/ techniques in jQuery for adding animations or effects to HTML components. They are:

The animation() function as mentioned below is used to provide element animation in jQuery.


           $("#btn_one").click (function () {
$("#div_one ").animate ({height: "250px"});
});

The show() function is used to make an element visible after it has been hidden.


           $("#btn_one").click (function () {
$("#div_one").show ();
});

The hide() function turns the visible state of an element invisible.


           $("#btn_one").click (function () {
$("#div_one").hide ();
});

Conclusion

It is evident that there are multiple points of difference between JavaScript and jQuery. The most prominent of these is that JS is a full-fledged language while jQuery is a library, JS is heavier in comparison, and also that jQuery simplifies many complex operations as it calls for fewer lines of code. However, there are limitations to both jQuery and JS, but JS still remains a major client-side language which widely for web development and is continuing to grow in popularity. Check out Technopedia a compilation of easy-to-follow courses on programming languages including JavaScript.

You might also be interested in reading the following:

Edited by

Shivani Goyal

Manager, Content

I am an economics graduate using my qualifications and life skills to observe & absorb what life has to offer. A strong believer in 'Don't die before you are dead' philosophy, at Unstop I am producing content that resonates and enables you to be #Unstoppable. When I don't have to be presentable for the job, I'd be elbow deep in paint/ pencil residue, immersed in a good read or socializing in the flesh.

Tags:

Computer Science