如何从 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,因此用户已经准备好该文件。这增加了缓存命中的几率。

更新于:2022年4月20日

15K+ 次浏览

启动您的职业生涯

完成课程后获得认证

开始
广告