Introduction to JQuery

HTML, CSS, and JavaScript are the three fundamental languages of the web. We structure our websites with HTML, style them with CSS, and add interactive functionality with JavaScript. In fact, most animations and any action that happens as a result of a user clicking, hovering, or scrolling are constructed with JavaScript.

jQuery is the “Write Less, Do More” JavaScript library. It is not a programming language, but rather a tool used to make writing common JavaScript tasks more concise. jQuery has the added benefit of being cross-browser compatible, meaning you can be certain the output of your code will render as intended in any modern

What is jQuery?

• 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.
• jQuery was created by John Resig in 2006 with the motto “Write less, do more”.
• 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.
• 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+ browser.

jQuery History

jQuery was first released in January 2006 by John Resig at BarCamp NYC. It is currently headed by Timmy Wilson and maintained by a team of developers.

Nowadays, jQuery is widely used technology. Most of the websites are using jQuery. So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and the most extendable. Many of the biggest companies on the web use jQuery.

Some of these companies are:

• Microsoft
• Google
• IBM
• Netflix

 

JQuery Prerequisite

It is always advised to a fresher to learn the basics of web designing before starting to learn jQuery. He should learn HTML, CSS and JavaScript first. But, if you belong to a technical background, it is up to you.

If you are a fresher and want to study these subjects first.

 

How to use jQuery?

There are two ways to use jQuery.

• Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
• CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).

Local Installation

Go to the https://jquery.com/download/ to download the latest version available.

Now put downloaded jquery-3.6.0.js file in a directory of your website, e.g. /jQquery.

Example

Now you can include jQuery library in your HTML file as follows −

<html>

  <head>

    <title>The jQuery Example</title>

    <script type="text/javascript" src="./jquery/jquery-3.6.0.js"></script>

    <script type="text/javascript">

      $(document).ready(function () {

        document.write("Hello, World!");

      });

    </script>

  </head>

  <body>

    <h1>Hello</h1>

  </body>

</html>

This will produce following result −

CDN Based Version

You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.

We are using Google CDN version of the library throughout this tutorial.

Example

Now let us rewrite above example using jQuery library from Google CDN. 

<html>

  <head>

    <title>The jQuery Example</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script type="text/javascript">

      $(document).ready(function () {

        document.write("Hello, World!");

      });

    </script>

  </head>

  <body>

    <h1>Hello</h1>

  </body>

</html>

This will produce following result −