如何從 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,因此使用者已經準備好該檔案。這增加了快取命中的機率。