How to link jQuery in HTML page ?

Last Updated : 04 Oct, 2021

jQuery is one of the most popularly used JavaScript Libraries out there which is a lot easier to use than standard JavaScript as it provides many built-in functions to access. It is build using JavaScript capabilities, you are able to use all the functions that are available in JavaScript.

In this article, we will discuss how to link jQuery to the HTML page. There are two ways through which you can include the jQuery file in HTML code:

By downloading the jQuery Library
By including the jQuery from a CDN

Downloading the jQuery Library: In this method, we directly download the library through the website on our system. Basically, there are two versions to download:-

Production Version – It is a compressed version used mainly for your live website.
Development Version – It is an uncompressed version that is used for development and testing purposes.

We will use the development version for our purpose. Just follow through these steps to download the jQuery on your system –

Open any browser and search for jquery.com (It is the official website for downloading jQuery Library).
On the main page, you will find the download link on the right side. Click on the link shown.

It will take you to the download page where you will be given some options to select. You have to download the uncompressed, development jQuery as shown below and make sure to keep it in the same folder where your HTML file is located. You have to right-click on the link and from the menu select “Save as…”.

Now let’s link it to our HTML code. Just add the following code under the <head> section of the HTML file:

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

Note: By default, the JavaScript file is saved by the above-given name (version here is 3.6.0). There may come newer versions to these, so refer to the file with that name.

Let’s see an example to understand how it is done. Below is the HTML code for the same:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- Linking of jQuery File  
        that we have downloaded -->
    <script src="jquery-3.6.0.js"></script> 
      
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("h2").html("Complete Portal for Geeks</b>"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2>GeeksforGeeks</h2> 
        <button>Click here</button> 
    </center> 
</body> 
  
</html>

Output:

2. Including the jQuery from a CDN: If you don’t want to use the above method, here is the alternative solution for it. In this method, you have to include jQuery through a CDN (Content Delivery Network) like Google CDN. It’s very simple, just add the following code under the <head> section of the HTML file:

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

Now let’s see an example of it. Below is the HTML code:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!--Linking of jQuery file using CDN-->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("h2").html("Complete Portal for Geeks</b>"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2>GeeksforGeeks</h2> 
        <button>Click here</button> 
    </center> 
</body> 
  
</html>