如何从 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 文件。此版本比其他版本更大,包含所有功能。
**jquery.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
我们可以在 **script** 标签的 **src** 属性中添加 Google CDN 地址,以从 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,因此用户已经准备好该文件。这增加了缓存命中的几率。