How to load local jQuery file in case CDN is not available ?

Last Updated : 25 Aug, 2021

jQuery is a lightweight, "write less, do more" JavaScript library. jQuery helps to write JavaScript as simply as easily possible. It is effective in converting a few lines of code in JavaScript to one single line. It also simplifies tasks like Ajax calls and DOM (Document Object Model).

The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

There are a number of ways you can use jQuery in your application, one being easier than the others. Below are some of the methods that you can use to load local jquery file.

Method 1: Using jQuery CDN (Content Delivery Network)

Example: In this example, we will simply include the CDN line in the script tag and If you click the submit button you will see your name coming up as alert in the browser.

HTML

<!DOCTYPE html>
<html>

<head>
    <!--Script loaded from Google CDN service-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>

    <p>Using the CDN link for jQuery</p>

    <input type="text" placeholder="Name...." id="name">
    <button id="btn">Submit</button>

    <script>
        $("#btn").click(function (event) {

            // If you click the submit button 
            // you will see your name coming
            // up as alert in the browser
            event.preventDefault();
            var name = $("#name").val();
            alert(name);
        });
    </script>
</body>

</html>

Output:

Now we will see how to load the local jquery file in case if above CDN is not available.

Method 2: Download jQuery to use it locally.

Downloading the jQuery library from here. There are two versions of jQuery you can download.

Production version: This is for your live website because it has been minified and compressed
Development version: This is for testing and development (uncompressed and readable code)

Download jquery library link from this page

The downloaded file will be a single JavaScript file that you can reference as shown. While saving in your current folder, rename it and include the same name in your header section while including the library file.

Example: In this example, instead of using CDN we will download library file "jquery.min.js" and If you click the submit button you will see your name coming up as alert in the browser.

HTML

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script>

    <!--In case cdn fails, local will load up for sure-->
    <script>
        window.jQuery || document.write(
            '<script src="jquery.min.js">\x3C/script>'
        )
    </script>
    <!--'\x3C' has been used so that the script 
        does not end prematurely. The above 
        condition checks whether local has 
        loaded if not then it loads up the 
        local -->
</head>

<body>
    <h2 style="color:green">GeeksforGeeks</h2>

    <p>
        This works with library downloaded 
        in the current folder
    </p>

    <input type="text" placeholder="Name...." id="name">
    <button id="btn">Submit</button>

    <script>
        $("#btn").click(function (event) {

            // If you click the submit button you 
            // will see your name coming up as 
            // alert in the browser
            event.preventDefault();
            var name = $("#name").val();
            alert(name);
        });
    </script>
</body>

</html>

Output:

Note: The path in the source (src) of the script tag needs to be configured properly. It should be set to the right path for jQuery to work perfectly.

You can also install jQuery as a node package using npm (node package installer).