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 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 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=
</script>
<script>
window.jQuery || document.write(
'<script src="jquery.min.js">\x3C/script>'
)
</script>
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...