How to use a jQuery library in your project ?

Last Updated : 30 May, 2023

In this article, we will see how to use the jQuery library in a project. There are two methods to add a jQuery library to a project which are

Include jQuery library from CDN link
Download the jQuery library from the official website

Include jQuery library from CDN link: CDN stands for Content Delivery Network which is basically a set of servers used for storing and delivering data. Basically, these jQuery library files are already uploaded to various CDNs and we can use them directly on our web page. Then, we don’t need to download any files on our local machine.

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

We can see the CDN link inside the “src” attribute. We have successfully added jQuery to our web page. We can use all the features of jQuery on our page. While loading the page, the browser will automatically download the jQuery library files from the CDN link.

Example: In this example, we will use CDN link for including CDN link

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery -->
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Include jQuery library from CDN link
    </h3>
    <h2>Welcome to GeeksforGeeks</h2>
    <button id="id_attr">Add Style</button>
    <script>
        $(document).ready(function() {
            $('#id_attr').click(function() {
                $('h2').css("color", "green");
            });
        });
    </script>
</body>
</html>

Output:

Download the jQuery library: In this section, first, we download the jQuery library from the downloadable link. After downloading the files, we will add the downloaded files to our web page in this manner.

<script src=”file_name_with_full_path”></script>

Example: In this example, we will download the jQuery library

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <!-- Including jQuery -->
    <script src="jquery-3.6.0.js">
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Download the jQuery library
    </h3>
 
    <h2>Welcome to GeeksforGeeks</h2>
 
    <button id="id_attr">Add Style</button>
 
    <script>
        $(document).ready(function() {
            $('#id_attr').click(function() {
                $('h2').css("color", "green");
            });
        });
    </script>
</body>
 
</html>