Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to link jQuery from Google CDN?
jQuery is a JavaScript library primarily designed with the purpose to make it easier to use JavaScript on our website. jQuery wraps many lines of JavaScript code into methods that we can call with a single line of code. Google provides CDN support for jQuery via the googleapis.com domain. The latest version of Google CDN provides four different types of jQuery versions- normal (uncompressed), minified, slim, and slim & minified. Google CDN provides the jQuery via ajax.googleapis.com domain.
Different jQuery Versions
jQuery is provided with different versions having different sizes or functionality. The four versions are discussed below.
jquery.js is the normal jQuery file that is uncompressed. This version is bigger than the others with all functions included.
query.min.js is the minified version of the jQuery where spaces and unnecessary characters are removed to make the size less.
jquery.slim.js is the less functional version where some less used functions are removed. It includes the most popular and core functions.
jquery.slim.min.js is the smallest version where spaces and unnecessary characters and some functions are removed. It's a minified version of jquery.slim.js.
Example #1 − Link Normal jQuery from Google CDN
To link normal jQuery from Google CDN, add the Google CDN address in the src attribute of the script tag. The jquery.js can be added like below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.
Here, we are using the Google CDN version of the library. You can try to run the following code to learn how to use Google CDN to link jQuery.
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Uncompressed jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Output
This will produce the following result -
Hello, World! We are using Uncompressed jQuery.
Example #2 − Link Minified jQuery from Google CDN
We can link a minified jQuery from Google CDN by using script tag and providing the Google CDN address as the src attribute. The jquery.min.js can be added like below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.
Here, in the example below we include the minified jQuery library in your HTML page as follows –
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Minified jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Output
On successful execution of the above code, It will produce following result -
Hello, World! We are using Minified jQuery.
Example #3 − Link Slim jQuery from Google CDN
We add the Google CDN address in the src attribute of the script tag, to link slim jQuery from Google CDN. The jquery.slim.js can be added like below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
Let’s understand how to link minified jQuery from Google CDN with the help of a complete example.
Here, in the example below we link the slim jQuery library in your HTML page as follows –
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Slim jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Output
This will produce the following result -
Hello, World! We are using Slim jQuery.
Example #4 − Link Slim and Minified jQuery from Google CDN
To link slim and minified jQuery from Google CDN, add the Google CDN address in the src attribute of the script tag. The jquery.slim.min.js can be added like below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
Let’s understand how to link slim and minified jQuery from Google CDN with the help of a complete example.
Here, we are using the Google CDN version of the library. You can try to run the following code to learn how to use Google CDN to link slim and minified jQuery.
<html>
<head>
<title>jQuery Google CDN</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"> </script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using Slim andMinified jQuery.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Output
The browser will display the following result -
Hello, World! We are using Slim and Minified jQuery.
Advantages of using jQuery from Google CDN
Since the jQuery file is loaded from Google CDN and not from your website, it decreases the load on your website. It improves the overall performance of the website.
Google has servers all over the world decreasing the latency. It ensures that the user will get geographically close responses.
The users already have the file ready as more websites use jQuery from Google CDN. It increases the chance of a cache-hit.
14K+ Views
