How to link jQuery in HTML page ?

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>
Output: 
HTML-Questions
jQuery-Basics
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples