What is the difference between JavaScript and JQuery?

JavaScript is an interpreted, object-oriented programming language. It's mainly used to make webpages interactive but can also be used to code server-side applications.

On the other hand, JQuery is a library written in JavaScript that provides a large number of features.

Since JQuery is just more JavaScript, everything that JQuery can achieve can be achieved using JavaScript. However, the same features would take more effort and lines of code in JavaScript than in JQuery.

The table below summarizes the significant differences:

The main differences in code can be observed in the following:

• DOM handling
• Event handling
• Animations
• Ajax calls

JQuery simplifies the code required for implementing the above features.

Document object model (DOM) handling

DOM objects are visual or functional objects that are part of the DOMInternal structure of elements maintained by the browser..

Note: Click here to learn about the DOM.

JavaScript accesses DOM objects using the following syntax:

The id string parameter is the HTML ID of the element we want to manipulate.

On the other hand, JQuery implements JQuery objects which are wrapper objects that consist of one or more DOM objects.

Below is the syntax needed to access JQuery objects:

The $ operator is used to access objects, and the HTML ID of the desired element is passed as a string.

Note: The string parameter must start with # if an ID is being passed.

Event handling

Events are anything that the browser or user does. This includes clicking, loading, typing, and so on.

The example below shows one way to implement a button click event in JavaScript:

• Line 1: We retrieve the button and add an event listener using the addEventListener() method. The first parameter indicates the type of event, and the second parameter is the function to be executed after the event.
• Line 2: We retrieve the heading element and change its display text.

Event handling in JQuery is much simpler.

• Line 1: The button is retrieved by ID. The click() method specifies the addition of a click event.
• Line 2: We retrieve the h1 heading element and change its display text.

Animations

Animations are achieved by making changes in the styling of an element.

JavaScript does not have an explicit animate function. Instead, we must implement all animations by changing the CSS of an element.

We can implement a simple animation of a sliding box in JavaScript in the following manner:

• Line 1: We retrieve the box element by ID and attach a click event.
• Lines 4–5: We set an interval to call the frame() function every one millisecond.
• Lines 6–13: We define the frame() function. If the x coordinate of the box (x_pos) is less than 500, we increment the x coordinate. Otherwise, we reset the interval.

On the other hand, JQuery has a powerful animate() method that significantly reduces the code needed for animations.

The following example shows the same animation using JQuery:

• Line 1: We retrieve the box, and specify a click event is specified.
• Line 2: We use the object's animate() method and specify the required animation. In this case, we want the box's left side to move to position 500.

Ajax calls

Ajax techniques allow web applications to send and receive data from a server asynchronously.

In JavaScript, the browser-provided XMLHttpRequest object is used to make HTTP requests.

Given below is an example of an HTTP request using JavaScript. In this example, we request a user's data from a public API and display the retrieved first name.

Explanation

In the HTML section of the code, we create a p element and a button. In the JavaScript section of the code, we add an event listener on the button. The explanation for the JavaScript code is as follows:

• Line 1: The message <p> is initially hidden.
• Line 2: The button element is retrieved, and a click event is added.
• Line 4: We define a function to perform the HTTP request. The function takes the URL of the API and a callback function.
• Line 5: We create an instance of XMLHttpRequest. This will help us send the HTTP request.
• Lines 6–9: We define the action to perform after the request is sent. If there were no errors, the call back function is called with the response data as a parameter.
• Lines 10–11: The request is sent as an asynchronous HTTP GET request.
• Lines 14–18: The callback function is defined. This function parses the response to a JSON format and displays the name attribute from the response.
• Line 20: The get function is called with the desired API URL and the defined callback function.

The implementation for a simple GET request looks very daunting using just JavaScript. Fortunately, we can implement the same function in JQuery much more easily.

Explanation

The same example is reworked using JQuery. The explanation for the JavaScript code is as follows:

• Line 1: The message <p> is initially hidden.
• Line 2: The button is retrieved by id, and a click event is added
• Line 3: The GET request is defined. The API's URL and a callback function are given as parameters. The callback function expects two parameters, the response data, and the response status.