資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 頁面中連結 jQuery？
什麼是 jQuery？
jQuery 是一個快速簡潔的 JavaScript 庫，其主要設計理念是“少寫程式碼，多做事情”。該庫的主要目的是簡化我們在網站上使用 JavaScript 的過程。jQuery 簡化了 HTML 文件 遍歷、事件處理、動畫和 Ajax 互動，從而實現快速 Web 開發。jQuery 將許多 JavaScript 程式碼行封裝到我們可以用一行程式碼呼叫的方法中。
如何連結 jQuery？
在 HTML 頁面中連結 jQuery 有兩種方法：
-
透過本地下載 jQuery 庫 - 你可以將 jQuery 檔案下載到本地計算機，並將其包含在 HTML 頁面中。
-
透過從 CDN 包含 jQuery - 你可以直接從內容分發網路 (CDN) 將 jQuery 庫新增到 HTML 頁面中。
1. 透過本地下載 jQuery 庫
-
從官方網站 https://jquery.com/download/. 下載最新版本的 jQuery 庫。你可以下載四種 jQuery 版本中的任何一種：未壓縮版、壓縮版、精簡版和精簡壓縮版。
-
現在將下載的 jquery-3.6.0.min.js 檔案放在網站的某個目錄中，例如 /jquery。
-
我們可以使用 script 標籤並在 src 屬性中提供下載的 jQuery 庫檔案地址來在 HTML 頁面中連結 jQuery。jquery-3.6.0.min.js 可以如下新增。
<head> <script type="text/javascript" src="/jquery/jquery-3.6.0.min.js"></script> </head>
讓我們透過一個完整的示例來理解。
示例
在下面的示例中，我們如下在 HTML 頁面中包含 jQuery 庫：
<html>
<head>
<title>The jQuery Local Example</title>
<script type="text/javascript" src="/jquery/jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
document.write("Hello, World! We are using jQuery from local machine");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
輸出
這將產生以下結果：
Hello, World! We are using jQuery from local machine
2. 透過從 CDN 包含 jQuery
我們可以直接從內容分發網路將 jQuery 庫連結到 HTML 頁面中。有不同的 CDN 提供最新版本的 jQuery 庫。例如，Google、Microsoft、Cloudflare CDN 和 jQuery 自身的 CDN。
讓我們瞭解如何使用示例分別從這些 CDN 連結 jQuery。
示例 #1 - 從 Google CDN 連結 jQuery
我們可以使用 script 標籤並在 src 屬性中提供 jQuery Google CDN 地址來在 HTML 頁面中連結 jQuery。jquery.min.js 可以如下新增。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
這裡，在下面的示例中，我們如下在 HTML 頁面中連結 jQuery 庫：
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
background-color: red;
border-radius: 5px;
border: 2px solid blue;
margin-left: 50px;
margin-top: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>$(document).ready(function() {
$('div').fadeIn('slow');
});
</script>
</head>
<body>
<div></div>
</body>
</html>
輸出
這裡，fadeIn() 方法將所選元素的不透明度從隱藏更改為可見。它用於指定淡入效果的速度，可以是緩慢或快速。
示例 #2 - 從 Microsoft CDN 連結 jQuery
我們可以使用 script 標籤並在 src 屬性中提供 jQuery Microsoft CDN 地址來在 HTML 頁面中連結 jQuery。jquery-3.6.0.js 可以如下新增。
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js'></script>
這裡，在下面的示例中，我們從 Microsoft CDN 在 HTML 頁面中連結 jQuery 庫：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery from Microsoft AJAX CDN</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
<script>
function domReady() {
$('#btn').click( showMessage );
}
function showMessage() {
$('#message').fadeIn('slow');
}
$( domReady );
</script>
</head>
<body>
<button id="btn">Show Message</button>
<div id="message" style="display:none">
<p> Hello, World! We are using jQuery from Microsoft CDN. </p>
</div>
</body>
</html>
輸出
當你點選“顯示訊息”按鈕時，訊息將顯示。
示例 #3：從 Cloudflare CDN 連結 jQuery
我們還可以使用 Cloudflare CDN 將 jQuery 庫連結到我們的 HTML 頁面。為了在 HTML 頁面中連結 jQuery，我們將 jQuery Cloudflare CDN 地址新增到 script 標籤的 src 屬性中。jquery.min.js 可以如下新增。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
這裡，在下面的示例中，我們從 Cloudflare CDN 在 HTML 頁面中連結 jQuery 庫：
<html>
<head>
<title>jQuery Google CDN</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using jQuery from Cloudflare CDN.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
輸出
這將產生以下結果：
Hello, World! We are using jQuery from Cloudflare CDN.
示例 #4 - 從 jQuery CDN 連結 jQuery
我們還可以使用 jQuery CDN 將 jQuery 庫連結到 HTML 頁面中。為了在 HTML 頁面中連結 jQuery，我們將 jQuery CDN 地址新增到 script 標籤的 src 屬性中。我們還必須將 integrity 和 crossorigin 新增到 script 中。我們可以直接從 jQuery 網站複製指令碼程式碼。jquery-3.6.0.min.js 可以如下新增：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
這裡，在下面的示例中，我們從 jQuery CDN 在 HTML 頁面中連結 jQuery 庫：
<html>
<head>
<title>jQuery Google CDN</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
document.write("Hello, World! We are using jQuery from jQuery CDN.");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
輸出
這將產生以下結果：
Hello, World! We are using jQuery from jQuery CDN.
29K+ 瀏覽量
