理解歷史脈絡
jQuery 幾乎定義了 AJAX / Web 2.0 時代的前端開發習慣，是 JavaScript 演進史的重要一段。
從經典寫法理解 jQuery：它為什麼紅過？現在又該怎麼學？
在 React、Vue 與現代框架普及之前，很多互動網頁、後台管理介面、CMS 外掛與舊型商業網站， 幾乎都靠 jQuery 來處理 DOM、事件、動畫與 AJAX。理解它，不只是學一個舊工具，更是在理解 Web 前端曾經怎麼解決真實問題。
Why：為什麼現在還值得學 jQuery？
維護舊專案
許多舊網站、CMS 模板、教學範例與企業內部系統，現在仍然大量使用 jQuery。
看懂抽象化
jQuery 幫你把 DOM、事件與 AJAX 包裝成較短語法，能幫助你理解 library 在幫你省什麼工。
What：jQuery 到底在幫你做什麼？
| 能力 | jQuery 幫你簡化什麼 | 典型寫法 |
|---|---|---|
| 選取元素 | 用類似 CSS selector 的方式快速找到 DOM 節點 | $(".card") |
| 事件處理 | 用簡短語法綁定 click、input、submit 等事件 | $("#btn").on("click", ...) |
| 樣式 / class 操作 | 快速切換 class、顯示 / 隱藏、做簡單動畫 | addClass()、toggleClass() |
| AJAX | 簡化非同步請求與回應處理 | $.ajax()、$.get() |
| 鏈式寫法 | 讓多個操作可以串在一起 | $(...).addClass(...).text(...) |
一句話理解：
jQuery 是一個 JavaScript Library，特別擅長把早期前端最常見的 DOM、事件與 AJAX 工作包裝成比較短、比較一致、跨瀏覽器差異較少的寫法。
核心觀念：$() 是入口，鏈式寫法是特色
入口：$()
你通常會先用 $() 找到元素，再對它做文字、樣式、事件或動畫操作。
$("#message")
$(".menu-item")
$(document)特色：鏈式操作
jQuery 常把多個動作串成一行，這也是它當年讓人覺得很順手的原因之一。
$("#status")
.addClass("is-ready")
.text("載入完成")
.show();原生 JavaScript vs jQuery：差別在哪裡？
| 任務 | 原生 JavaScript | jQuery |
|---|---|---|
| 選取單一元素 | document.querySelector("#title") |
$("#title") |
| 綁定 click 事件 | button.addEventListener("click", handler) |
$("#btn").on("click", handler) |
| 改變文字 | el.textContent = "Hello" |
$("#msg").text("Hello") |
| 發送 AJAX | fetch("/api/status") |
$.get("/api/status") |
現在怎麼看這件事？
現代瀏覽器已經讓原生 JavaScript 變強很多，所以今天學 jQuery，不是因為它一定更先進，而是因為它能幫你理解前端 library 曾經如何解決真實痛點。
Example 1：點擊按鈕後更新文字與 class
jQuery 版 DOM 互動
這個例子最能看出 jQuery 和第 05 章原生 DOM 寫法的差異：語法更短、操作集中。
<button id="hello-btn">點我</button>
<p id="message" class="message">尚未互動</p>
<script>
$("#hello-btn").on("click", function () {
$("#message")
.text("按鈕已被點擊，jQuery 已更新內容。")
.addClass("is-highlight");
});
</script>按鈕已被點擊，jQuery 已更新內容。
$("#hello-btn")代表用 selector 找到按鈕。.on("click", ...)用來綁定事件。.text()和.addClass()可直接接在同一串鏈式語法後面。
Example 2：用 jQuery 切換提示區塊顯示狀態
顯示 / 隱藏與樣式切換
很多舊型互動元件、摺疊面板與後台 UI 都很常看到這類寫法。
$("#toggle-help").on("click", function () {
$("#help-box").toggleClass("is-open");
$("#help-box").slideToggle();
});這是一個被展開的提示區塊。
toggleClass()常用來切換狀態樣式。slideToggle()是 jQuery 經典動畫方法之一。- 這類寫法在舊版後台模板、Bootstrap 4 時代的周邊範例裡很常見。
Example 3：用 $.ajax() 呼叫 API
AJAX 時代的代表寫法
在 fetch() 普及前，很多非同步請求就是靠 $.ajax() 來完成。
$.ajax({
url: "/api/status",
method: "GET",
dataType: "json",
success: function (data) {
$("#status").text(data.message);
},
error: function () {
$("#status").text("讀取失敗");
}
});
畫面結果
服務狀態：ok，資料已載入。
{
"message": "服務狀態：ok，資料已載入。"
}$.ajax()可以明確指定網址、方法、資料格式與成功 / 失敗處理。- 這是 jQuery 非常經典的一塊，也直接推動了 AJAX 型互動網站的普及。
- 今天很多新專案會改用
fetch()或 Axios，但讀懂舊寫法仍然很有價值；若要補上通用原理，可再讀第 10 章。
今天什麼情況還會遇到 jQuery？
維護舊網站
企業內部系統、舊型活動網站、CMS 模板或長年未重構的管理後台。
閱讀舊教學 / 外掛
許多舊文章、舊版 Bootstrap 周邊範例與 jQuery plugin 仍然能在網路上找到。
理解前端抽象化
jQuery 是理解「library 幫你包裝原生能力」最經典的入門案例之一。
jQuery 的限制與今天的定位
| 面向 | jQuery 的優勢 | 今天的限制 |
|---|---|---|
| DOM 操作 | 語法短、跨瀏覽器差異處理成熟 | 現代原生 DOM API 已經強很多 |
| AJAX | 在早期非常方便 | 現在 fetch()、Axios 更常見 |
| 大型應用 | 適合小型互動與逐步加料 | 不擅長像現代框架那樣管理複雜狀態與元件化 |
所以今天怎麼教最合理？
把 jQuery 放在「JavaScript 發展史 + library 抽象化」的位置最合適：它非常值得學來理解歷史與維護舊專案，但不一定是新專案的第一選擇。
Summary：本章結論
- jQuery 是 JavaScript Library，不是 Framework；它主要幫你簡化 DOM、事件、動畫與 AJAX。
- 它在 AJAX / Web 2.0 時代之所以爆紅，是因為當時跨瀏覽器問題多、原生 DOM API 也比較不方便。
- 今天學 jQuery 的主要價值，在於理解歷史脈絡、看懂舊專案、以及理解 library 如何包裝原生能力。
- 如果你先讀過第 05 章原生 DOM 與第 08 章 JavaScript 全貌，再回來讀這一章，會最容易理解它的位置；若要把
$.ajax()放回一般原理，可再接著讀第 10 章。