Different ways to include jQuery in a Webpage

Last Updated : 12 Aug, 2021

In this article, we are going to learn different ways to include jQuery on a page. Basically, we know that jQuery comes with a lot of exciting features. So if we want to use those features, we just have to add the jQuery library to our webpage.

There are two ways of adding jQuery library to our webpage.

Include jQuery from CDN (Content Delivery Network)
Download the jQuery library from the official website

1. Include jQuery 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 1: In this example, we will add jQuery CDN link to execute jQuery code.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <p></p> 
      
    <script> 
        $('p').text('Hello geeks. CDN Working'); 
    </script> 
</body> 
  
</html> 

Output:

2. Download the jQuery library: In this way, we will add jQuery library to our page. First, we will download the jQuery library files to our localhost from the jQuery Website. After downloading, we will add the downloaded files to our web page in this manner.

<script src="file_name_with_full_path"></script>

Example 2: In this example, we will add jQuery link from downloaded path to execute jQuery code.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src="jquery-3.6.0.js"></script> 
</head> 
  
<body> 
    <p></p> 
      
    <script> 
        $('p').text('Hello geeks. Downloaded files'); 
    </script> 
</body> 
  
</html> 