jQuery 入门教程：现代开发者的 jQuery 指南

一、jQuery 的定位

jQuery 统治了前端开发十余年（2006-2016），它解决的核心痛点是：

• 浏览器兼容：统一的 API 抹平 IE6/7/8/9 与 Chrome/Firefox 的差异
• 简洁的 DOM 操作：$(".class") 比 document.querySelectorAll 短且强大
• AJAX 简化：$.ajax() 比原生 XMLHttpRequest 友好得多
• 动画：内置 fade、slide、animate

现在（2024年），原生 JavaScript 已足够好用，但 jQuery 仍然有价值：维护遗留项目、WordPress/Shopify 主题、快速原型、Bootstrap 5 之前版本的依赖。

二、核心选择器

// 基本选择器
$("#id")        // ID
$(".class")     // 类
$("div")        // 标签
$("div, span")  // 多选

// 层级选择器
$("div p")      // 后代
$("div > p")    // 直接子元素
$("div + p")    // 相邻兄弟

// 过滤选择器
$("li:first")           // 第一个
$("li:last")            // 最后一个
$("li:eq(2)")           // 索引 2
$("li:contains('文字')") // 包含文字
$("input:checked")      // 选中状态

// 属性选择器
$("[data-id]")          // 有 data-id 属性
$("[data-id='42']")     // 精确匹配
$("[href^='https']")    // 以 https 开头

三、DOM 操作

// 读取/修改
$("#title").text("新标题");           // textContent
$("#content").html("<b>加粗</b>");    // innerHTML
$("input").val("默认值");              // value
$("img").attr("src", "new.jpg");      // 属性
$("div").css("color", "red");         // 单一样式
$("div").css({ color: "red", fontSize: "20px" }); // 多样式

// 类操作
$("div").addClass("active");
$("div").removeClass("old");
$("div").toggleClass("hidden");

// 插入
$("#list").append("<li>新项</li>");  // 末尾
$("#list").prepend("<li>首项</li>"); // 开头
$("<p>").text("Hello").appendTo("#container");

// 删除
$(".obsolete").remove();   // 彻底删除
$(".temp").empty();        // 保留元素，清空内容

四、事件处理

// 绑定事件
$("#btn").on("click", function (e) {
  e.preventDefault();
  console.log(this);     // DOM 元素（不是 jQuery 对象）
  console.log($(this));  // jQuery 对象
});

// 事件委托（动态元素也能响应）
$("#list").on("click", ".item", function () {
  $(this).toggleClass("selected");
});

// 一次性事件
$("#btn").one("click", function () {
  console.log("只触发一次");
});

// 触发事件
$("#btn").trigger("click");

// 快捷方法
$("#btn").click(fn);
$("input").keydown(fn);
$("form").submit(fn);
$("#el").hover(fnEnter, fnLeave);

五、AJAX

// 完整版
$.ajax({
  url: "/api/users",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({ name: "张三" }),
  headers: { Authorization: "Bearer token" },
  success: function (data) { /* ... */ },
  error: function (jqXHR, status, error) { /* ... */ },
});

// 快捷方法
$.get("/api/users", { page: 1 }, function (data) {});
$.post("/api/users", { name: "张三" }, function (data) {});
$.getJSON("/api/config.json", function (config) {});

// Promise 风格（jQuery 3+）
$.ajax({ url: "/api/data" })
  .done((data) => console.log(data))
  .fail((jqXHR) => console.error(jqXHR.status))
  .always(() => console.log("完成"));

六、动画

// 预设动画
$("#box").fadeIn(400);
$("#box").fadeOut(400);
$("#box").slideDown(300);
$("#box").slideUp(300);

// 自定义动画
$("#box").animate({
  width: "300px",
  opacity: 0.5,
}, 500, function () {
  console.log("动画完成！");
});

// 链式调用
$("#box")
  .slideUp(300)
  .delay(500)
  .slideDown(300);

七、实用技巧

防抖搜索

let searchTimer;
$("#search").on("input", function () {
  clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    $.get("/api/search", { q: $(this).val() }, renderResults);
  }, 300);
});

jQuery 插件模式

// 创建插件
$.fn.highlight = function (color) {
  return this.css("background-color", color || "#ff0");
};

// 使用
$("p").highlight("#ff6");

八、现代替代方案

jQuery 功能	原生替代
$(".class")	document.querySelectorAll(".class")
$.ajax()	fetch() / axios
.fadeIn()	CSS transition / Element.animate()
.on("click")	addEventListener
.addClass()	classList.add()

九、思考题

1. jQuery 的链式调用是如何实现的？
2. 为什么事件委托 $(parent).on("click", ".child", fn) 对动态元素有效？
3. 在一个已有 Vue/React 的页面中引入 jQuery 可能引发什么问题？