Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 25 Aug, 2021
Geek Week

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=
    </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:

With CDN link

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 filejquery.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=
    </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:

With a downloaded jquery library 

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).

npm install jquery

You can also install it using the yarn CLI, the command being as follows.

yarn add jquery

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :