如何从 Google CDN 链接 jQuery?
jQuery 是一个 JavaScript 库，其主要目的是简化网站上 JavaScript 的使用。jQuery 将多行 JavaScript 代码封装成方法，我们只需一行代码即可调用这些方法。Google 通过 googleapis.com 域名提供 jQuery 的 CDN 支持。最新版本的 Google CDN 提供四种不同的 jQuery 版本:普通版(未压缩)、压缩版、精简版和精简压缩版。Google CDN 通过 ajax.googleapis.com 域名提供 jQuery。
不同的 jQuery 版本
jQuery 提供不同版本，每个版本的大小和功能各不相同。以下将介绍这四个版本。
jquery.js 是未压缩的普通 jQuery 文件。此版本比其他版本更大，因为它包含了所有功能。
query.min.js 是 jQuery 的精简版，其中移除了空格和不必要的字符以减小文件大小。
jquery.slim.js 是功能较少的版本，其中移除了一些不常用的功能。它包含最常用和核心的功能。
jquery.slim.min.js 是最小的版本，其中移除了空格、不必要的字符和一些功能。它是 jquery.slim.js 的精简版。
示例 1 - 从 Google CDN 链接普通 jQuery
要从 Google CDN 链接普通 jQuery，请在 script 标签的 src 属性中添加 Google CDN 地址。可以像下面这样添加 jquery.js。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
让我们通过一个完整的示例来了解如何从 Google CDN 链接压缩后的 jQuery。
这里，我们使用的是 Google CDN 版本的库。您可以尝试运行以下代码，了解如何使用 Google CDN 链接 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>
输出
这将产生以下结果 -
Hello, World! We are using Uncompressed jQuery.
示例 2 - 从 Google CDN 链接压缩后的 jQuery
我们可以使用 script 标签，并将 Google CDN 地址作为 src 属性，来链接来自 Google CDN 的压缩后的 jQuery。jquery.min.js 可以像下面这样添加。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
让我们通过一个完整的示例来了解如何链接来自 Google CDN 的压缩后的 jQuery。
在下面的示例中，我们将压缩后的 jQuery 库包含到您的 HTML 页面中，如下所示:
<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>
输出
成功执行上述代码后，将产生以下结果 -
Hello, World! We are using Minified jQuery.
示例 #3 − 从 Google CDN 链接精简版 jQuery
我们将 Google CDN 地址添加到 script 标签的 src 属性中，以从 Google CDN 链接精简版 jQuery。jquery.slim.js 可以像下面这样添加。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
让我们通过一个完整的示例来了解如何从 Google CDN 链接精简版 jQuery。
在下面的示例中，我们将精简版 jQuery 库链接到您的 HTML 页面中，如下所示:
<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>
输出
这将产生以下结果 -
Hello, World! We are using Slim jQuery.
示例 4 - 从 Google CDN 链接精简版 jQuery
要从 Google CDN 链接精简版 jQuery，请在 script 标签的 src 属性中添加 Google CDN 地址。jquery.slim.min.js 可以像下面这样添加。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
让我们通过一个完整的示例来了解如何从 Google CDN 链接精简版 jQuery。
这里，我们使用的是 Google CDN 版本的库。您可以尝试运行以下代码，了解如何使用 Google CDN 链接精简版和压缩版的 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>
输出
浏览器将显示以下结果 -
Hello, World! We are using Slim and Minified jQuery.
使用 Google CDN 加载 jQuery 的优势
由于 jQuery 文件是从 Google CDN 加载的，而不是从您的网站加载的，因此可以降低您网站的负载，从而提升网站的整体性能。
Google 在全球各地拥有服务器，可以降低延迟，确保用户获得地理位置相近的响应。
由于越来越多的网站使用 Google CDN 加载 jQuery，用户已经可以访问该文件，从而增加了缓存命中率。
