jQuery 常用命令速查表
把 jQuery 日常开发最常用的命令整理成速查，维护老项目时对照查。
返回 编程语言选择器 10
$("div")标签选择器
$(".class")类选择器
$("#id")ID 选择器
$("div.class")组合选择器
$("div > p")子元素选择器
$("div p")后代选择器
$(":input")所有表单元素
$(":checkbox")所有复选框
$("div:first")第一个 div
$("li:eq(2)")索引为 2 的 li
DOM 操作 10
$("#box").html()获取 innerHTML
$("#box").html("<p>内容</p>")设置 innerHTML
$("#box").text()获取文本内容
$("#box").val()获取表单值
$("#box").attr("data-id")获取属性
$("#box").attr("data-id", "123")设置属性
$("#box").addClass("active")添加类
$("#box").removeClass("active")移除类
$("#box").toggleClass("active")切换类
$("<div>").appendTo("body")创建并插入元素
事件绑定 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 主要用于维护老项目。