如何從 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+ 次瀏覽

啟動您的職業生涯

完成課程後獲得認證

開始
廣告