jQuery 命令速查表 - jQuery 常用 API 与 DOM 操作大全
这套速查给还在维护老旧代码库、或需要给既有站点打补丁的前端开发者，覆盖每个 jQuery 文件里都出现的 API：选择器、读写 DOM 内容与属性、切类名、事件绑定与委托、Ajax 简写，以及基础动画。与一条条堆 jQuery API 不同，这里按"取元素→改内容→绑事件→发请求"一类交互动作来分组。读完应能把选择器链式接上 DOM 编辑、在动态列表上用事件委托保持性能，并一行 Ajax 代替整页刷新。
选择器 10
$("div")标签选择器
$(".class")类选择器
$("#id")ID 选择器
$("div.class")组合选择器
$("div > p")子元素选择器
$("div p")后代选择器
$(":input")所有表单元素
$(":checkbox")所有复选框
$("div:first")第一个 div
$("li:eq(2)")索引为 2 的 li
DOM 操作与遍历 14
$("#box").children("li")取匹配元素的直接子元素中满足选择器的部分
$("#box").find("li")向下查找所有后代中匹配的元素
$("#box").hasClass("active")判断元素是否带有指定类，返回布尔值
$("#box").data("key")读取元素上存的 data-key 数据
$("#box").html()取匹配元素的首个 innerHTML，替换时把旧子节点整体替换
$("#box").html("<p>内容</p>")把元素内部 HTML 整体替换为给定片段，重渲染简单视图常用
$("#box").text()取合并后的纯文本内容，写文字内容用它避免 HTML 转义问题
$("#box").val()取表单控件当前值，读 input/select 的值最常用
$("#box").attr("data-id")取元素的 data-id 属性值，读自定义属性和固有属性通用
$("#box").attr("data-id", "123")为元素设置 data-id 属性，动态挂数据给事件回调读取
$("#box").addClass("active")为元素追加类名，常用于切换选中/高亮状态
$("#box").removeClass("active")移除指定类名，没有该类时无副作用
$("#box").toggleClass("active")有该类就移除、没有就添加，做开关样式最省事
$("<div>").appendTo("body")创建新元素并插到 body 末尾，动态添加 DOM 的常用写法
事件绑定 8
$("#btn").click(fn)点击事件
$("#btn").on("click", fn)绑定事件（推荐）
$("#btn").off("click")解绑事件
$(document).on("click", ".btn", fn)事件委托
$("input").change(fn)值改变事件
$("form").submit(fn)表单提交事件
$(document).ready(fn)DOM 加载完成
$(fn)简写：DOM 加载完成
Ajax 请求 5
$.get("/api/data", fn)GET 请求
$.post("/api/data", { key: "value" }, fn)POST 请求
$.getJSON("/api/data", fn)获取 JSON
$.ajax({ url, method, data, success })完整 Ajax 调用
$.ajaxSetup({ headers: { "X-Token": token } })全局设置请求头
动画与效果 8
$("#box").show()显示
$("#box").hide()隐藏
$("#box").toggle()切换显示
$("#box").fadeIn()淡入
$("#box").fadeOut()淡出
$("#box").slideDown()下滑显示
$("#box").slideUp()上滑隐藏
$("#box").animate({ left: "200px" }, 500)自定义动画
提示
- 事件委托 $(parent).on("click", ".child", fn) 适合动态添加的元素场景。
- jQuery 3.x 已移除 $.ajax() 的 success/error 回调，推荐用 Promise。
- 新项目建议用原生 DOM API 或 Vue/React，jQuery 主要用于维护老项目。
由 巧匠 维护
公开更新于 2026年7月21日，内容持续校对官方文档。