How to link jQuery from Google CDN?

jQueryWeb DevelopmentFront End Technology

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.

raja
David Meador
Published on 05-Dec-2017 14:17:21
Previous Page Print Page
Next Page  
Advertisements