Introduction to jQuery

Back to: jQuery Tutorials

Introduction to jQuery | What is, why, and how to use jQuery

In this article, I am going to give you a brief introduction to jQuery i.e. What is, why, and how to use jQuery. As part of this article, you will understand the following pointers.

  1. What is jQuery?
  2. Why jQuery?
  3. Syntax to use jQuery
  4. Example without using jQuery
  5. Example using jQuery
  6. How to download and use jQuery?
What is jQuery?
  1. jQuery is a fast, small, lightweight, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. As of May 2019, jQuery was used by 73% of the 10 million most popular websites.
  2. jQuery was created by John Resig in 2006 with the motto “Write less, do more”.
  3. The main purpose of jQuery is to make JavaScript faster, easier, more concise, more effective, and more attractive. jQuery helps the developers to make websites more dynamic and interactive with jQuery.
  4. jQuery takes a lot of common functionalities of Vanilla JavaScript which required many lines of code and wraps them into pre-defined and built-in methods which you can call in a single line of code in jQuery.
Why jQuery?

jQuery Syntax is designed to make it easier to achieve a wide collection of functionalities. Let us now see one by one, why we should learn jQuery and use it over vanilla JavaScript.

  1. LIGHT-WEIGHT: jQuery is a very lightweight library of JavaScript. Its minified file is just about 19 kB.
  2. SHORT SELECTORS: jQuery provides us a shorter syntax to select any element of our DOM (Document Object Model). Thus, using jQuery, we can easily target any of the DOM elements
  3. DOM MANIPULATION: jQuery makes the DOM manipulating really with short and simple syntax by its selector engine named Sizzle.
  4. DOM TRAVERSING: jQuery provides us built-in and predefined keywords to traverse through the DOM, which is really hassle-free for the developers.
  5. EVENT HANDLING: jQuery provides us an extremely easy and elegant way to Handle any keyboard or mouse event in our web application such as clicking on a button or pressing the enter key or firing the blur event.
  6. AJAX SUPPORT: jQuery helps us to develop dynamic and interactive web applications with the latest AJAX technology. AJAX calling with jQuery is much easier than vanilla JavaScript.
  7. ANIMATION: jQuery has a sea of built-in animation effects that can provide your website an elegant look.
  8. PLUG-INS: jQuery provides a lot of plug-ins to use in our web applications to make high-level effects, advanced and themeable widgets
  9. CROSS-BROWSER SUPPORT: JQuery has cross-browser support, works efficiently in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome, and Opera 9.0+.
Syntax to use jQuery:

jQuery has a very basic syntax to perform any functionalities

Basic syntax is: $(selector).action();

  1. The $ sign is to define/access jQuery
  2. (selector) is the query for any DOM elements. jQuery uses CSS selectors here
  3. Action() is the jQuery handler to perform any functionality to the selected DOM element

Now let us see a very short example of jQuery and look at how jQuery is simpler and shorter than JavaScript

Example without using jQuery:

Suppose we have to change the color of a div element by clicking a button. At first, let’s see how we can achieve that with JavaScript

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Example</h1>
<div class="test">
<p>Click on the button to change the color</p>
</div>
<button id="demo">Change Color</button>
<script>
const btn = document.getElementById('demo');
const div = document.querySelector('.test');
btn.addEventListener('click', function () {
div.style.backgroundColor = '#86f2f7';
});
</script>
</body>
</html>
Output:

Once you run the above code, you will get the following output in the browser.

Introduction to jQuery | What is, why, and how to use jQuery

After clicking the ‘Change Color’ button, it will change the background color of the div element as shown in the below image.

Introduction to jQuery | What is, why, and how to use jQuery

Example using jQuery:

Now let us see, how this can be achieved by jQuery in just one line of code as shown in the below example.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Example</h1>
    <div class="test">
        <p>Click on the button to change the color</p>
    </div>
    <button id="demo">Change Color</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('.test').css('backgroundColor','#86f2f7');
            });
        });
    </script>
</body>
</html>

Note: You might have noticed that our jQuery codes in the example are inside the document-ready event. This is to prevent any jQuery code from running before the document is finished loading (is ready). We will discuss the document-ready event elaborately in our next article.

How to use jQuery?

Now let us see that how we can download and use jQuery in our project. There are two ways to use jQuery in our project:

BY DOWNLOADING THE JQUERY LIBRARY:

We can download the jQuery library files from the jQuery official website and use them in our project. For that follow the steps-

Visit https://jquery.com/ and click on the “download jQuery” as shown in the below image.

BY DOWNLOADING THE JQUERY LIBRARY

Once you click on the Download jQuery button, it will open the below page. Here, you can find two versions – one is a compressed production version (for live websites) and the other one is an uncompressed development version (testing and development purpose). Now right-click on any of them and click on “Save link as…” and save the file in the same directory of your project.

DOWNLOADING THE JQUERY LIBRARY

BY USING CDN (CONTENT DELIVERY NETWORK):

This is quite simple to use. Inside the script tag, you have to include the CDN link provided by Google or Microsoft.

GOOGLE CDN: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

BY DOWNLOADING JQUERY USING NPM:

jQuery is registered as a package on npm. You can install the latest version of jQuery with the npm CLI command: npm install jquery

This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.

In the next article, I am going to discuss the jQuery document.ready function in detail. Here, in this article, I try to give you an overview of jQuery i.e. What is, why, and how to use jQuery and I hope you enjoy this What is, why, and how to use jQuery article.

Leave a Reply

Your email address will not be published. Required fields are marked *