jQuery Cheatsheet - jQuery API & DOM Manipulation Reference

This reference is for developers who maintain older codebases or browser extensions still built on jQuery, covering the API that lives in every such file: selectors, reading and writing DOM content and attributes, class toggling, event binding and delegation, Ajax shorthand, and simple animations. Unlike a flat jQuery API dump, entries are grouped by the interaction they perform — find elements, manipulate them, respond to events, or fetch data. After reading you should be able to chain a selector into DOM edits, delegate events to stay fast on dynamic lists, and replace a page refresh with an Ajax request.

Languages·41 commands·Last updated 2026-07-21

Selectors 10

$("div")

Tag selector

$(".class")

Class selector

$("#id")

ID selector

$("div.class")

Combined selector

$("div > p")

Child selector

$("div p")

Descendant selector

$(":input")

All form elements

$(":checkbox")

All checkboxes

$("div:first")

First div

$("li:eq(2)")

li at index 2

DOM Manipulation 10

$("#box").html()

Get innerHTML

$("#box").html("<p>content</p>")

Set innerHTML

$("#box").text()

Get text content

$("#box").val()

Get form value

$("#box").attr("data-id")

Get an attribute

$("#box").attr("data-id", "123")

Set an attribute

$("#box").addClass("active")

Add a class

$("#box").removeClass("active")

Remove a class

$("#box").toggleClass("active")

Toggle a class

$("<div>").appendTo("body")

Create and insert an element

Event Binding 8

$("#btn").click(fn)

Click event

$("#btn").on("click", fn)

Bind an event (recommended)

$("#btn").off("click")

Unbind an event

$(document).on("click", ".btn", fn)

Event delegation

$("input").change(fn)

Value change event

$("form").submit(fn)

Form submit event

$(document).ready(fn)

DOM ready

$(fn)

Shortcut: DOM ready

Ajax Requests 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 })

Full Ajax call

$.ajaxSetup({ headers: { "X-Token": token } })

Global request headers

Animations & Effects 8

$("#box").show()

Show

$("#box").hide()

Hide

$("#box").toggle()

Toggle visibility

$("#box").fadeIn()

Fade in

$("#box").fadeOut()

Fade out

$("#box").slideDown()

Slide down

$("#box").slideUp()

Slide up

$("#box").animate({ left: "200px" }, 500)

Custom animation

Tips

Event delegation $(parent).on('click', '.child', fn) fits dynamically added elements.
jQuery 3.x removed the success/error callbacks from $.ajax(); use Promises instead.
For new projects prefer native DOM APIs or Vue/React; jQuery is mainly for legacy maintenance.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

Official Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.