jQuery Cheatsheet - jQuery API & DOM Manipulation Reference
All essential jQuery commands organized by use case, with 41+ entries you can copy and run directly. Find the right command fast when you need it.
Back to LanguagesSelectors 10
$("div")标签选择器
$(".class")class选择器
$("#id")ID 选择器
$("div.class")组合选择器
$("div > p")子元素选择器
$("div p")后代选择器
$(":input")所有表单元素
$(":checkbox")所有复选框
$("div:first")第一个 div
$("li:eq(2)")index为 2 的 li
DOM 10
$("#box").html()Get innerHTML
$("#box").html("<p>内容</p>")Set innerHTML
$("#box").text()Get文本内容
$("#box").val()Get表单值
$("#box").attr("data-id")Getproperty
$("#box").attr("data-id", "123")Setproperty
$("#box").addClass("active")添加class
$("#box").removeClass("active")Removeclass
$("#box").toggleClass("active")切换class
$("<div>").appendTo("body")Create并Insert元素
Events 8
$("#btn").click(fn)点击事件
$("#btn").on("click", fn)绑定事件（recommended）
$("#btn").off("click")解绑事件
$(document).on("click", ".btn", fn)事件delegate
$("input").change(fn)值改变事件
$("form").submit(fn)表单提交事件
$(document).ready(fn)DOM 加载完成
$(fn)alias：DOM 加载完成
Ajax 5
$.get("/api/data", fn)GET request
$.post("/api/data", { key: "value" }, fn)POST request
$.getJSON("/api/data", fn)Get JSON
$.ajax({ url, method, data, success })完整 Ajax call
$.ajaxSetup({ headers: { "X-Token": token } })全局Setrequest头
Effects 8
$("#box").show()Display
$("#box").hide()隐藏
$("#box").toggle()切换Display
$("#box").fadeIn()淡入
$("#box").fadeOut()淡出
$("#box").slideDown()下滑Display
$("#box").slideUp()上滑隐藏
$("#box").animate({ left: "200px" }, 500)自定义动画
💡 Tips
- 事件delegate \$(parent).on("click", ".child", fn) 适合动态添加的元素场景。
- jQuery 3.x 已Remove \$.ajax() 的 success/error 回调，prefer Promise。
- 新项目建议用原生 DOM API 或 Vue/React，jQuery 主要用于维护老项目。
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it