**jQuery** is a widely used [JavaScript library](https://www.educative.io/answers/javascript-style-guide). It makes DOM manipulation easier with its syntaxes, making development faster.




To use jQuery, it must be referenced in the HTML file, and its syntaxes must be declared in a javascript file. 

There are two ways to include jQuery in a project's Html file:

>**Note:** It's recommended to work with the latest version of jQuery(version 3.6.3) to access the full functionality.

1. Download the latest jQuery library from [jQuery](https://jquery.com/) and include it in the head tag as follows:

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

2. Use a CDN. jQuery CDN can be [found here](https://releases.jquery.com/). Include the CDN in the `head` tag as follows:

   > **Note:** A **CDN (Content Delivery Network)** is a distributed network of servers that serves content to users based on their geographic location, ensuring high availability and performance. CDNs cache and distribute content, such as images, videos, audio files, and other static or dynamic web assets, to multiple edge servers located closer to end-users, reducing the latency and bandwidth requirements for delivering the content from a central location. This helps to improve the user experience and provide a more consistent performance for online content and applications.
```
<head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>
```



Once the jQuery library has been referenced in the HTML file, it will be available across the project. Let's declare the jQuery syntaxes in JavaScript.

# 
## Example



<html>
 <head>
   <head>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
 </head>
 <body>
   <h1>Click Me</h1>
 </body>
</html>

$(document).ready(function (){
    $('h1').click(function(){
        $('h1').text(`It's not magic, it's jQuery`).css('color', 'Green')
    })
})

codemirror

The code above uses the jQuery CDN to render jQuery in the development file. See **line 4** of the HTML tab. 

Here's an explanation for the JavaScript tab:

- **Line 1**: The file starts with `$(document.ready()`, which makes the jQuery wait for the HTML rendering before running.

- **Line 2**: This contains the content of the callback function of `$(document.ready()`. Here, we select `h1` using jQuery and assign the click event to it.

- **Line 3:** This line contains the content of the callback function of the click event. Once again, we select `h1` using jQuery, but this time with a different functionality assigned to it. The code here will run once we click `h1`. This changes the content of `h1` and gives it a green color.

Congratulations! We have successfully used jQuery in a JavaScript file.

The code above uses the jQuery CDN to render jQuery in the development file. See **line 4** of the HTML tab. 

Here's an explanation for the JavaScript tab:

- **Line 1**: The file starts with `＄(document.ready()`, which makes the jQuery wait for the HTML rendering before running.

- **Line 2**: This contains the content of the callback function of `＄(document.ready()`. Here, we select `h1` using jQuery and assign the click event to it.

- **Line 3:** This line contains the content of the callback function of the click event. Once again, we select `h1` using jQuery, but this time with a different functionality assigned to it. The code here will run once we click `h1`. This changes the content of `h1` and gives it a green color.

Congratulations! We have successfully used jQuery in a JavaScript file.

How to use jQuery in JavaScript file

Include jQuery in the HTML head with a local file or CDN, then declare syntaxes in JavaScript.

How to use jQuery in JavaScript file

Example

Explanation