jQuery - 概述

jQuery 是一個由 John Resig 在 2006 年建立的快速且簡潔的 JavaScript 庫，它有一個很棒的座右銘：寫得少，做得多。jQuery 簡化了 HTML 文件遍歷、事件處理、動畫和 Ajax 互動，從而加快了 Web 開發速度。

jQuery 特性

jQuery 透過編寫更少的程式碼簡化了程式設計師的各種任務。以下是 jQuery 支援的重要核心特性列表：

DOM 操作 - jQuery 透過使用名為Sizzle的跨瀏覽器開源選擇器引擎，簡化了選擇 DOM 元素、遍歷它們以及修改其內容的操作。
事件處理 - jQuery 提供了一種優雅的方式來捕獲各種事件，例如使用者點選連結，而無需在 HTML 程式碼本身中使用事件處理程式。
AJAX 支援 - jQuery 可以幫助您使用 AJAX 技術開發響應式且功能豐富的網站。
動畫 - jQuery 帶有大量內建的動畫效果，您可以在您的網站中使用它們。
輕量級 - jQuery 是一個非常輕量級的庫 - 大約 19KB（最小化並 gzip 壓縮）。
跨瀏覽器支援 - jQuery 具有跨瀏覽器支援，並且在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中執行良好。
最新技術 - jQuery 支援 CSS3 選擇器和基本的 XPath 語法。

設定 jQuery

有兩種方法可以使用 jQuery。

本地安裝 - 您可以在本地計算機上下載 jQuery 庫，並將其包含在您的 HTML 程式碼中。
基於 CDN 的安裝 - 您可以在 HTML 程式碼中直接從內容分發網路 (CDN) 包含 jQuery 庫。

jQuery - 本地安裝

您可以在 Web 伺服器上下載最新版本的 jQuery，並將下載的庫包含在您的程式碼中。我們建議您下載庫的壓縮版本以獲得更好的效能。

訪問https://jquery.com/download/下載最新的可用版本。
現在將下載的jquery-3.6.0.min.js檔案放在您網站的目錄中，例如 /jquery/jquery-3.6.0.js。
最後，在您的 HTML 標記檔案中包含此檔案，如下所示。

示例

現在，您可以將jquery庫包含在您的 HTML 檔案中，如下所示。嘗試點選圖示執行以下 jQuery 程式碼：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>

jQuery - 基於 CDN 的安裝

您可以直接從內容分發網路 (CDN) 將 jQuery 庫包含到您的 HTML 程式碼中。有各種 CDN 提供指向最新 jQuery 庫的直接連結，您可以將其包含在您的程式中。

示例

現在讓我們使用來自 Google CDN 的 jQuery 庫重寫上面的示例。嘗試點選圖示執行以下 jQuery 程式碼：

<!doctype html>
<html>
<head>
<title>The jQuery Example</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!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

在本 jQuery 教程中，我們始終使用我們自己的 Tutorials Point CDN 版本的庫。您可以在網際網路上找到許多其他 CDN 來在您的網頁中包含 jQuery。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      document.write("Hello, World!");
   });
</script>
</head>
<body>
   <!-- HTML body goes here -->
</body>
</html>
<html>

如何呼叫 jQuery 庫函式？

由於我們在使用 jQuery 時幾乎所有操作都讀取或操作文件物件模型 (DOM)，因此我們需要確保在 DOM 準備好後才開始新增事件等。

如果您希望某個事件在您的頁面上生效，則應在 $(document).ready() 函式內呼叫它。其中的所有內容都將在 DOM 載入後以及頁面內容載入之前載入。

為此，我們為文件註冊一個 ready 事件，如下所示：

$(document).ready(function() {
   // do stuff when DOM is ready
});

要呼叫任何 jQuery 庫函式，請使用 HTML 指令碼標籤，如下所示。嘗試點選圖示執行以下 jQuery 程式碼：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function() {alert("Hello, world!");});
   });
</script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

如何使用自定義指令碼？

最好將您的自定義程式碼寫入自定義 JavaScript 檔案：custom.js，如下所示：

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

讓我們將此檔案儲存在/jquery目錄中，然後我們可以在 HTML 檔案中包含custom.js檔案，如下所示。嘗試點選圖示執行以下 jQuery 程式碼：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script src="https://tutorialspoint.tw/jquery/custom.js"></script>
</head>
<body>
   <div>Click on this to see a dialogue box.</div>
</body>
</html>

使用多個庫

您可以將多個庫一起使用，而不會相互衝突。例如，您可以一起使用 jQuery 和 MooTool javascript 庫。您可以檢視jQuery noConflict方法以瞭解更多詳細資訊。

接下來是什麼？

如果您不理解上面的示例，請不要太擔心。您將在後續章節中很快掌握它們。

下一章將嘗試涵蓋一些來自傳統 JavaScript 的基本概念。

列印頁面