如何從 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,因此使用者已經準備好該檔案。這增加了快取命中的機率。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP