什麼是 jQuery？您該如何使用它？

Pranay Kapgate2021-08-18 · 6 min read

簡介

如果您熟悉程式設計的世界，您就會知道程式語言有多麼重要。其中一些最關鍵且最常用的語言包括 HTML, CSS，以及 JavaScript。HTML 和 CSS 可以幫助您設計網站並構建其結構，而 JavaScript 則能讓網站具有互動性。您可以使用許多 JavaScript 函式庫來為您的網頁專案增添獨特的功能。其中之一就是 jQuery 函式庫。

jQuery 本身並不是一種程式語言。它是一個可以用來簡化 JavaScript 網頁開發的工具。這有助於讓任務變得更簡單、更直觀。它以「寫得更少，做得更多」（Write Less, Do More）的概念而聞名。除了讓網頁開發變得更容易之外，jQuery 還為您帶來了跨瀏覽器相容性的額外好處。這意味著無論使用哪種瀏覽器進行輸出，程式碼都能正確呈現。

為了更好地視覺化呈現 jQuery 如何讓程式碼更簡潔，請看一個例子。假設我們正在編寫「Hello, World!」程式。以下是它分別在 JavaScript 和 jQuery 中的呈現方式：

JavaScript
document.getElementById("demo").innerHTML = "Hello, World!";

1 2	JavaScript document.getElementById("demo").innerHTML = "Hello, World!";

jQuery
$("#demo").html("Hello, World!");

1 2	jQuery $("#demo").html("Hello, World!");

這兩行程式碼都會產生相同的結果。然而，如您所見，jQuery 讓撰寫變得更加簡潔且切中要害。

在本教學中，您將學習到所有關於 jQuery 的基礎知識。 您可以自行從這個網站下載該工具。我們將假設您是完全沒有 jQuery 知識的初學者來進行。本教學將教您如何安裝 jQuery 以及與其相關的一些基本概念。我們將探索 jQuery 中一些常見的選擇器（selectors）、事件（events）和效果（effects）。接著，您將透過實用的範例學習如何測試 API、DOM 和 CDN 等開發概念。請繼續閱讀以熟悉 jQuery 的世界。

在我們開始之前

如果您事先了解某些事情，將會對您大有幫助。例如，對 HTML 和 CSS 的運作方式有一些基本的了解將對您有極大的幫助。我們不會在本教學中涵蓋這些內容。我們將在假設您至少知道如何架設一個簡單網站的前提下進行。您也應該對程式設計的運作方式有基本的了解。這並不一定意味著您必須是 JavaScript 專家才能繼續。只要對程式設計中的邏輯、變數和資料類型等概念有一些基本的熟悉就足夠了。

如何在您的系統上設定 jQuery

首先，讓我們’看看如何在您的系統上設定 jQuery。由於 jQuery 是一個 JavaScript 函式庫，因此它是以 JavaScript 檔案的形式提供。您必須在我們網站的 HTML 程式碼中連結此檔案。有兩種方法可以做到這一點。正如我之前提到的，其中一種方法是從這裡下載。除了官方網站之外，您也可以在 Google Hosted Libraries 中找到 jQuery，就在這裡.

另一種方法是讓您使用內容傳遞網路（CDN）來連結檔案。CDN 包含一組伺服器，有助於在本地傳遞網頁內容。透過 CDN 託管 jQuery 檔案可以讓內容更快地送達使用者。這就是為什麼我們在本教學的後續部分中將使用內容傳遞網路的原因。

在我們的第一個範例中，我們將製作一個網頁專案。這個小專案包含 style.css 於 css/ 目錄中。 script.js 位於 js/ 目錄中。最後，一個 index.html 存在於網頁專案的根目錄中：

Project Structure

根據這個專案，我們將建立一個 HTML 骨架。隨後，我們將其儲存為 index.html:

<!doctype html>

<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

<!doctype html>

<head>

<title>jQuery Demo</title>

</head>

<body>

</body>

</html>

這就是我們連結 jQuery 檔案的地方。正如我之前所說，我們將透過 CDN 進行連結。您將在 </body> 標籤。之後，您可以新增您的自訂 JavaScript 檔案，也就是我們範例中的 script.js 。請記住，務必將 JavaScript 檔案放在 jQuery 函式庫下方，如下所示：

<!doctype html>

<html lang="en">

<head>
  <title>jQuery Demo</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

<!doctype html>

<head>

<title>jQuery Demo</title>

</head>

<body>

</body>

</html>

如果您改為下載 jQuery 函式庫的本機複本，該怎麼辦？在這種情況下，您必須將 jQuery 檔案儲存在 js/ 資料夾中。然後您可以將其連結為 js/jquery.min.js.

jQuery：基本原理

在深入探討細節之前，讓我們來複習一下 jQuery 的一些基本原理。jQuery 的主要工作是使用 DOM 來連接瀏覽器中的 HTML 元素。DOM 代表文件物件模型。它是使 JavaScript 能夠與瀏覽器中的 HTML 進行互動的方法。您可以透過在網頁上按一下滑鼠右鍵並選擇「檢查」來視覺化 DOM。出現在開發者工具中的 HTML 就是 DOM。

節點是 DOM 中的單個 HTML 元素。JavaScript 可以修改所有這些物件或元素。您可以將這些物件的排列想像成一個樹狀結構。 <html> 位於根部，而其他元素則進一步分支。

按一下滑鼠右鍵並選擇「檢視網頁原始碼」將顯示網站的原始 HTML。請記住，這與 DOM 不同。DOM 是可以被改變的，而 HTML 原始碼則是完全靜態的。您在 JavaScript 中所做的任何變更都不會影響此 HTML 檔案。整個 <html> 節點被包裝在一個稱為 document 物件的外層中。

接下來，我們將介紹如何使用 jQuery 來操作您的網頁及其功能。然而，在這樣做之前，您必須確保頁面已準備就緒。

在建立 script.js 檔案於 js/ 目錄後，輸入以下內容：

$(document).ready(function() {

  // all custom jQuery will go here

});

$(document).ready(function() {

// 所有自訂的 jQuery 都將放在這裡

});

現在，您編寫的任何程式碼都將被包裝在此程式碼中。jQuery 將偵測程式碼的準備狀態。只有在 DOM 準備就緒時，才會執行此函式中的程式碼。

我們將重溫在教學開始時提到的「Hello, World!」指令碼。假設我們想要啟動此指令碼。要使用 jQuery 將此文字輸出到瀏覽器，我們必須將 ID demo 套用到一個空的區塊級段落，如下所示：

...

<body>
<p id="demo"></p>

...

...

<body>

...

要呼叫 jQuery，我們必須使用 $ 符號。您可以套用 CSS 語法和方法來透過 jQuery 存取 DOM。一個簡單的範例如下：

$("selector").method();

1	$("selector").method();

這是您將與 jQuery 一起使用的格式。我們已經知道 # 符號在 CSS 中代表 ID。因此，您可以使用 #demo.html() 選擇器。此方法將允許您變更元素中存在的 HTML。

以下程式碼顯示我們將 “Hello, World” 程式放入 script.js 檔案的 jQuery ready() 包裝器：

$(document).ready(function() {
  $("#demo").html("Hello, World!");
});

$(document).ready(function() {

$("#demo").html("Hello, World!");

});

您必須將此行程式碼新增至 script.js 檔案。儲存此檔案。之後，您可以在瀏覽器中開啟 index.html 檔案。您應該能夠看到輸出 Hello, World!。這也是一個為了便於理解而檢查 DOM 的好時機。右鍵點擊 “Hello, World!” 文字。選擇「檢查元素」（Inspect Element）。DOM 將會顯示 <p id="demo">Hello, World!</p>。另一方面，點擊「檢視網頁原始碼」（View Page Source）將只會顯示原始的 HTML。在這種情況下，那將會是 <p id="demo"></p>.

什麼是選擇器（Selectors）？

現在我們將繼續介紹 jQuery 中的一些關鍵功能。其中之一就是選擇器。jQuery 選擇器會告訴程式您想要處理或「選擇」哪些元素。它們與您在 CSS 中使用的選擇器非常相似。以下是在 jQuery 中存取選擇器的基本格式：

$("selector")

1	$("selector")

您可以使用單引號或雙引號字串，雖然 jQuery 風格指南更偏好後者。如果您願意，可以在此官方頁面上查看 jQuery 選擇器的完整清單。供您參考，以下是一些最常用的選擇器：

$("*")

這是萬用字元（Wildcard）選擇器。它會選擇頁面上的每一個元素。

$(this)

這是當前（Current）選擇器。它會選擇您目前正在使用函式操作的元素。

$("p")

這是標籤（Tag）選擇器。它會選擇 <p> 標籤的所有實例。

$(".example")

這是類別（Class）選擇器。它會選擇所有套用了 example 類別的元素。

$("#example")

這是 ID 選擇器。它只會選擇 example ID 的單一實例。

$("[type='text']")

這是屬性（Attribute）選擇器。它會選擇任何在 text 屬性中套用了 type 的指定元素。

$("p:first-of-type")

這是虛擬元素（Pseudo Element）選擇器。它能協助您選擇第一個 <p>.

什麼是事件（Events）？

網頁的某些功能會在頁面載入時立即載入。以 “Hello, World” 為例，在這種情況下，我們可以直接將程式碼新增到原始 HTML 中。但是，當載入某個功能需要使用者互動時會發生什麼事？這就是 jQuery 派上用場的地方。

假設我們希望在使用者點擊按鈕後顯示某些文字。要新增此功能，您必須將 <button> 元素新增至 index.html 檔案。此按鈕將會監聽點擊「事件」：

...

<body>

<button id="trigger">Click me</button>
<p id="demo"></p>

...

<body>

<button id="trigger">Click me</button>

使用者與瀏覽器進行互動的任何時候都被視為一個事件。互動可以透過滑鼠指標或鍵盤進行。在上述範例中，點擊按鈕就是我們的事件。這就是為什麼它被稱為點擊事件（click event）。

接下來，我們必須呼叫一個包含 “Hello, World” 程式碼的函式。為此，我們將使用 click() 方法：

$(document).ready(function() {
  $("#trigger").click();
});

$(document).ready(function() {

$("#trigger").click();

});

如您所見，我們 <button> 元素的 ID 命名為 trigger。我們可以使用 $(“#trigger") 來選擇它。新增 click() 方法的目的是讓程式監聽點擊事件。接下來，我們將把包含文字程式碼的函式放入該方法中：

function() {
  $("#demo").html("Hello, World!");
}

function() {

$("#demo").html("Hello, World!");

}

最後，我們的程式碼看起來會像這樣：

$(document).ready(function() {
  $("#trigger").click(function() {
  $("#demo").html("Hello, World!");
  });
});

$(document).ready(function() {

$("#trigger").click(function() {

$("#demo").html("Hello, World!");

});

現在您可以儲存 script.js 檔案。重新整理 index.html 在瀏覽器中以套用變更。點擊按鈕後，將會出現測試輸出「Hello, World!」。

除了 click 之外，還有其他類型的 jQuery 事件。您可以從以下網址查看這些事件方法的完整清單：這份官方文件。以下是您偶爾可能會遇到的一些最常用的事件：

click()

click 事件會在按一下滑鼠時執行程式碼。

hover()

hover 事件會在滑鼠指標懸停在元素上時執行程式碼。您也可以指定程式碼是否由滑鼠進入或離開所觸發，分別使用 mouseenter() 與 mouseleave()。

submit()

提交表單會觸發程式碼。

scroll()

向下捲動螢幕將是執行程式碼的事件。

keydown()

按下鍵盤上的向下鍵將執行程式碼。

什麼是效果（Effects）？

jQuery 效果與 jQuery 事件協同工作。顧名思義，效果的主要目的是為頁面添加動畫。它允許您操作元素以套用各種效果。這些效果可以由特定事件觸發。

為了解釋得更清楚，我們來看一個例子。假設我們想打開和關閉一個彈出式遮罩層（popup overlay）。一種方法是使用兩個不同的 ID，一個用來打開遮罩層，另一個用來關閉它。另一種方法是使用 class 來做到這一點。使用 class 的好處是同一個函數就能夠打開和關閉遮罩層。

打開您的 index.html 檔案。然後，刪除 body 中的 <button> 和 <p> 標籤。現在將以下幾行程式碼新增到 HTML 中：

...

<body>
<button class="trigger">開啟</button>

<section class="overlay">
  <button class="trigger">關閉</button>
</section>

...

...

<body>

</section>

...

接下來讓我們看看我們的 style.css 檔案。在這裡，我們的目標是使用最少的 CSS 來隱藏遮罩層。為此，我們將使用 display: none 並像這樣將其居中：

.overlay {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 200px;
  width: 200px;
  background: gray;
}

.overlay {

display: none;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

height: 200px;

width: 200px;

background: gray;

}

接下來，我們將使用 toggle() 方法。此方法將允許我們切換 display 屬性在 none 與 block 之間。因此，每當我們點擊時，遮罩層就會隱藏和顯示。將此程式碼新增到 script.js 檔案中：

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".overlay").toggle();
  });
});

$(document).ready(function() {

$(".trigger").click(function() {

$(".overlay").toggle();

});

最後，重新整理 index.html 以套用變更。現在您將能夠切換強制回應視窗（modal）的顯示狀態。您只需點擊按鈕即可。還有其他 jQuery 效果可以與此結合使用。例如，您可以將簡單的 toggle() 變更為 slideToggle() 或 fadeToggle().

以下是 jQuery 中一些常用的效果方法：

toggle()

此方法允許您變更元素的顯示狀態。與其相關的單向效果為 show() 與 hide().

fadeToggle()

此方法允許您透過動畫切換元素的顯示狀態和不透明度。在這種情況下，單向效果為 fadeIn() 與 fadeOut().

slideToggle()

此方法允許您使用滑動效果來切換元素的顯示狀態。在這種情況下，單向效果為 slideUp() 與 slideDown().

animate()

此效果方法允許您執行自訂動畫效果。它使用給定元素的 CSS 屬性。

結論

希望本教學能幫助您深入了解 jQuery。它是一個非常實用的工具，在促進網頁開發和程式碼編寫方面大有幫助。如果您是程式設計領域的新手，情況更是如此。

我們探索了構成 jQuery 基礎的各種元素。我們還學習了如何選擇和修改這些元素，以及如何善用事件和效果。掌握像 jQuery 這樣的工具可以幫助您建立充滿互動功能的網站，從而提供引人入勝的使用者體驗。

請查看來自我們部落格的一些資源，這些資源將在您使用 JavaScript 時提供幫助：

祝您電腦使用愉快！

Pranay Kapgate

作者 · CloudSigma

Preslav Dobrev 是 CloudSigma 的創意設計師，專注於透過傳統與創新行銷渠道建立一致的企業形象。他擅長將藝術願景與策略行銷相融合，創造具有影響力的品牌敘事。

什麼是 jQuery？您該如何使用它？

簡介

在我們開始之前

如何在您的系統上設定 jQuery

jQuery：基本原理

什麼是選擇器（Selectors）？

什麼是事件（Events）？

什麼是效果（Effects）？

結論

Pranay Kapgate

留言