jQuery – Introduction

jQuery is a fast, small, and feature-rich JavaScript library.

It makes it much easier to use JavaScript on your website by simplifying common tasks like:

Instead of writing long lines of JavaScript code, jQuery allows you to achieve the same result with just a few lines.

Without jQuery, developers had to write complex JavaScript code to handle even simple tasks (like selecting elements or sending AJAX requests).

With jQuery, you can:

Example

document.getElementById("demo").style.display = "none";

With jQuery

$("#demo").hide();

There are two ways to add jQuery to your webpage:

1. Using a CDN (Content Delivery Network)

Add this line inside your HTML <head> or before </body>:

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

2. Using a Local Copy

Download jQuery from https://jquery.com/download

Then include it like this:

<script src="jquery.min.js"></script>

The basic syntax of jQuery is:

$(selector).action()

Example:

$(document).ready(function() {
  $("p").click(function() {
    $(this).hide();
  });
});

$(document).ready() ensures the code runs only after the page is fully loaded.
$("p") selects all paragraph elements.
.click() adds a click event.
$(this).hide() hides the clicked paragraph.

JavaScript Handbook