What are all the ways to include jQuery on a page ?

Last Updated : 17 May, 2023

In this article, we will explore the methods by which one can add jQuery to a web page. jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

Different methods to include jQuery on a page are:

Downloading the jQuery library
Using jQuery via a CDN

Method 1: Downloading the jQuery library

Step 1: We need to download the jQuery library’s development version, which we will use for development and testing purposes. Click on the following Download Link. You will be redirected to the exact page of the jQuery file, now right-click on the page and save the file in the local storage.

Step 2: Create an HTML file and Declare the jQuery file path in the <script> tag inside the <head> tag section of the HTML file. Note that the jQuery file must be placed inside the workspace.

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

Example: Adding the jQuery file to the webpage after downloading it.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <h1>Using jQuery by downloading it.</h1>
</body>
</html>

Output:

Method 2: Using jQuery via a CDN: This method is quite easy to use compared to the earlier one. We just have to paste the following code to the head section of the HTML file.

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

Now let’s understand what is CDN, it stands for Content Delivery Network, It is a worldwide distributed group of servers of several web services that provide internet content with fast delivery. So CDN contains all the essential information of particular web services so that any user can use it around the globe, anytime. For our case we will use the CDN of jQuery, In order to use jQuery with CDN, we have to be connected to the network since it is an online-based service.

Example: In this example, we will use the CDN link to include jQuery to our webpage.

HTML

<!DOCTYPE html>
<html>
<head>
    <!--jQuery CDN link-->
    <script src="
https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
<body>
    <p>GeeksforGeeks</p>
</body>
</html>

Output:

Ways to check whether the jQuery is loaded or not:

The methods that we discussed above are all about the ways of including jQuery on the page. Now we will do some checks for that if jQuery is loaded or not. We will see some examples with proper output so that users can get a clear understanding of them. The below piece of code will check whether jQuery is loaded on our page or not. We will add this snippet of code to our page.

Syntax:

window.onload = function () {
  if (window.jQuery) {
    alert("jQuery is loaded.");
  } else {
    alert("jQuery is not loaded.");
  }
};

Example 1: In this example, we won’t add jQuery intentionally by either of the methods and check for jQuery using the above code. In the output image, we can clearly see that it detects that jQuery is not loaded.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        window.onload = function () {
            if (window.jQuery) {
 
                alert("jQuery is loaded.");
            } else {
 
                alert("jQuery is not loaded.");
            }
        };
    </script>
</body>
</html>

Output:

Example 2: In this example, we will see that after adding jQuery to the page it will detect the jQuery in the page.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
 
<body>
    <script>
        window.onload = function () {
            if (window.jQuery) {
 
                alert("jQuery is loaded.");
            } else {
 
                alert("jQuery is not loaded.");
            }
        };
    </script>
</body>
 
</html>

Output: We can see that it detects that jQuery is included on the page.

Example 3: Now in this example, we will check for jQuery on the page. If the jQuery is loaded then it’s fine, however, if it does not load then we will add the jQuery library to the page.

HTML

<!DOCTYPE html>
<html>
 
<!--jQuery CDN link-->
<!-- Initially we haven't added the jQuery CDN link -->
 
<body>
    <button onclick="addJQuery()">Add</button>
    <button onclick="check()">Check</button>
 
    <script>
        function check() {
            if (window.jQuery) {
 
                // jQuery is included in the page
                alert("jQuery is loaded");
            } else {
 
                // jQuery is not included in the page
                alert("jQuery is not Loaded, click "
                    + "add button to add jQuery");
            }
        };
 
        function addJQuery() {
 
            // When we click the add button it will 
            // check for availability of jQuery
            if (window.jQuery) {
                alert("jQuery already loaded!");
            } else {
 
                // If its not present then these code 
                // will add jQuery to the page
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
 
                document.getElementsByTagName("head")[0]
                            .appendChild(script);
                             
                alert("now jQuery is loaded");
            }
        }
    </script>
</body>
</html>