資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何從 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。
在此示例中，我們如下所示在 HTML 頁面中包含最小化 jQuery 庫：
<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。
在此示例中，我們如下所示在 HTML 頁面中連結精簡 jQuery 庫：
<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，使用者已經準備好該檔案。這增加了快取命中的機會。
15K+ 瀏覽量
