引言

jQuery 作為輕量級 JavaScript 庫，核心價值在于 簡化 DOM 操作、跨瀏覽器兼容性和高效開發。盡管現代框架崛起，jQuery 仍在遺留系統維護、快速原型開發中廣泛應用。本文涵蓋 jQuery 3.6+ 核心語法，重點解析高效用法與最佳實踐。

---

一、jQuery 基礎語法

1. 選擇器語法

// 基礎選擇器  
$("#header")                // ID 選擇器  
$(".btn-primary")           // Class 選擇器  
$("div")                    // 標簽選擇器  // 層級選擇器  
$("ul > li")                // 直接子元素  
$("section p")              // 后代元素  // 屬性選擇器  
$("input[type='text']")     // 精確匹配屬性  
$("a[href^='https']")       // 以 https 開頭  // 偽類選擇器  
$("tr:even")                // 偶數行  
$("li:first-child")         // 第一個子元素  
$("div:hidden")             // 隱藏元素  

? 最佳實踐：優先使用 data-* 屬性選擇器（如 $("[data-toggle='modal']")）增強可維護性。

---

二、DOM 操作語法

1. 內容操作

// 讀寫內容  
$("#box").html("<b>新內容</b>");  // 設置 HTML  
$("#box").text();                // 獲取純文本  
$("input").val("2025");         // 設置表單值  // 元素增刪改  
$("#list").append("<li>Item</li>"); // 末尾添加  
$("#header").prepend("↑");        // 開頭添加  
$(".old").remove();               // 刪除元素  

2. 屬性與樣式

// 屬性操作  
$("#logo").attr("src", "new.png");  // 修改屬性  
$("#checkbox").prop("checked", true); // 布爾屬性  // 類操作  
$("#menu").addClass("active");  
$("#menu").toggleClass("expanded"); // 切換類  // 樣式操作  
$("#box").css("color", "red");  
$("#box").css({                   // 批量設置  "background": "#333",  "padding": "10px"  
});  

---

三、事件處理語法

1. 事件綁定與委托

// 標準綁定  
$("#btn").on("click", function() {  alert("Clicked!");  
});  // 事件委托（動態元素適用）  
$("#table").on("click", ".delete-btn", function() {  $(this).closest("tr").remove();  
});  // 快捷方法  
$("#form").submit(function(e) {  e.preventDefault(); // 阻止默認提交  
});  

2. 事件解綁

$("#btn").off("click");  // 移除所有 click 事件  
$("#table").off("click", ".delete-btn"); // 移除委托事件  

---

四、動畫與效果

1. 基礎動畫

$("#box").hide(400);           // 400ms 隱藏  
$("#box").show("slow");        // 慢速顯示  
$("#box").toggle(200);         // 切換顯示狀態  

2. 高級動畫

// 滑動效果  
$("#panel").slideUp();  
$("#panel").slideToggle();  // 淡入淡出  
$("#img").fadeIn(1000);  
$("#img").fadeTo(500, 0.5);   // 漸變到半透明  // 自定義動畫  
$("#ball").animate({  left: "+=200px",  opacity: 0.5  
}, 1000);  

---

五、AJAX 請求語法

// $.ajax() 基礎用法  
$.ajax({  url: "/api/data",  type: "GET",  dataType: "json",  success: function(data) {  console.log("成功:", data);  },  error: function(xhr) {  console.error("失敗:", xhr.status);  }  
});  // 快捷方法  
$.get("/api/user", { id: 101 }, function(user) {  console.log(user.name);  
});  $.post("/api/save", JSON.stringify(data), function(res) {  alert("保存成功！");  
});  

?? 注意：jQuery 3.0+ 默認返回 Promise，可使用 .done()、.fail() 替代 success/error 回調。

---

六、鏈式調用優化

// 典型鏈式調用  
$("#list")  .find("li")  .addClass("item")  .css("color", "blue")  .end()          // 回退到 #list  .append("<li>End</li>");  // 鏈式中斷技巧  
const $items = $("#list li");  
$items.eq(0).hide();  // 中斷鏈式但不破壞選擇集  

---

七、插件開發規范

1. 基礎插件結構

(function($) {  $.fn.highlight = function(options) {  // 合并默認參數  const settings = $.extend({  color: "#ff0",  backgroundColor: "#000"  }, options);  // 主邏輯  return this.css({  color: settings.color,  backgroundColor: settings.backgroundColor  });  };  
})(jQuery);  // 調用  
$("p").highlight({ color: "red" });  

---

八、jQuery vs 現代框架

維度	jQuery	React/Vue
DOM 操作	直接操作 DOM	虛擬 DOM 差分更新
數據綁定	手動同步數據與視圖	響應式數據綁定
組件化	依賴插件體系	原生組件支持
適用場景	傳統多頁應用、漸進增強	復雜單頁應用（SPA）

🔮 趨勢建議：新項目優先選用 Vue/React，舊項目維護可結合 jQuery 與現代工具（如 Webpack 打包）。

---

附錄：實用資源

1. 官方文檔：jQuery API
2. 代碼片段：

// 防抖搜索  
$("#search").on("input", $.debounce(300, function() {  fetchResults($(this).val());  
}));  // 檢測元素可見性  
if ($("#banner").is(":visible")) {  startAnimation();  
}  

3. 推薦插件：
   • 動畫增強：jQuery Easing
   • 表單驗證：jQuery Validation
   • 懶加載：jQuery Lazy

---

結語：jQuery 的 簡潔語法 與 強大選擇器 仍是快速開發利器。掌握核心語法，結合現代工具鏈（如 ES6 + Webpack），可高效維護傳統項目。在可預見的未來，jQuery 仍將在 Web 生態中扮演重要角色。