jQuery CDN

2 contributors

7 contributions

0 discussions

6 points

Created by:

Marcin

2447

Latest lib version:

https://developers.google.com/speed/libraries

In this article, we're going to have a look at how to attach extended jQuery libaby from external server (CDN). Main advantage of this apprach are: servers are scattered all over the world, many web pages use same links so files are cached and link loading is quick because of fast servers.

Below we can see ordered list of jQuery CDN links:

Google CDN:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Microsoft CDN:


<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

jQuery CDN:


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

cdnjs:


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Next part of article contains pre-prepared templates.

1. Google CDN with html tempalte example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

2. Microsoft CDN with html tempalte example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

3. jQuery CDN with html tempalte example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>

4. cdnjs with html tempalte example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <script>

    $(document).ready(function() {
      	console.log('Document is ready to use jQuery!');
    });
   
  </script>
</body>
</html>