jQuery Cheat Sheet
A reference for jQuery's selector syntax, DOM manipulation methods, event handling, and AJAX helpers for legacy and existing codebases.
1 PageBeginnerMar 10, 2026
Selectors
CSS-style selectors for finding elements.
javascript
$('#id') // by id$('.class') // by class$('div') // by tag$('div.class') // combined tag + class$('ul li:first-child') // pseudo-selectors$('[data-foo]') // attribute selector$('a[href^="https"]') // attribute value starts-with selector
DOM Manipulation
Reading and writing element content, attributes, and classes.
javascript
$('#el').text('Hello'); // set text content$('#el').html('<b>Hi</b>'); // set inner HTML$('#el').val(); // get an input's value$('#el').addClass('active').removeClass('hidden');$('#el').css('color', 'red');$('#el').attr('data-id', 5);$('#el').append('<li>New</li>'); // add child at the end$('#el').remove(); // remove the element
Events
Binding event handlers and running code on DOM ready.
javascript
$('#btn').on('click', function () { console.log('clicked', $(this).text());});$('#form').on('submit', function (e) { e.preventDefault();});$(document).ready(function () { // DOM is fully parsed});// shorthand for the above:$(function () { // DOM is fully parsed});
AJAX & Utility Methods
Common helpers for requests and iteration.
- $.ajax- low-level, fully configurable AJAX request (method, url, data, success/error callbacks)
- $.get- shorthand for a GET request
- $.post- shorthand for a POST request
- $.getJSON- shorthand GET request that expects a JSON response
- .each()- iterates over a jQuery collection or plain array
- .on()- attaches an event handler; supports delegated events via a selector argument
- .off()- removes a previously attached event handler
- .data()- reads or writes arbitrary data associated with an element
Deferred & Promises
Coordinating multiple async operations with $.Deferred and $.when.
javascript
function loadUser(id) { const dfd = $.Deferred(); $.getJSON(`/api/users/${id}`) .done((data) => dfd.resolve(data)) .fail((xhr) => dfd.reject(xhr)); return dfd.promise();}$.when(loadUser(1), loadUser(2)) .done((user1, user2) => { console.log(user1[0], user2[0]); }) .fail((xhr) => { console.error('one of the requests failed', xhr); });// jqXHR objects returned by $.ajax are themselves Promise-compatible$.ajax('/api/ping').then((data) => console.log(data));
Event Namespacing & Custom Events
Scope handlers so they can be removed independently, and trigger your own events.
javascript
$('#panel') .on('click.tooltip', showTooltip) .on('click.analytics', trackClick);// removes only the tooltip handler, leaves analytics intact$('#panel').off('click.tooltip');// remove every handler in a namespace across multiple event types$('#panel').off('.tooltip');// custom application events$('#cart').on('cart:updated', function (e, total) { console.log('new total', total);});$('#cart').trigger('cart:updated', [42.5]);
DOM Traversal Methods
Navigating the DOM relative to a jQuery collection without re-selecting from scratch.
- .closest(sel)- walks up the tree from each element, returning the nearest ancestor (or self) matching sel
- .parents(sel)- all ancestors matching sel, ordered from closest to farthest
- .siblings(sel)- sibling elements optionally filtered by sel, excluding the element itself
- .find(sel)- descendants matching sel, searched within each element in the current set
- .filter(sel|fn)- reduces the set to elements matching a selector or predicate function
- .not(sel)- the inverse of .filter -- removes elements matching sel
- .is(sel)- boolean test for whether any element in the set matches sel
- .index()- returns the zero-based position of the first element among its siblings
Effects Queue & Custom Animations
jQuery queues fx by default; use .queue()/.dequeue() or $.animate for custom sequencing.
javascript
$('#box') .animate({ left: '200px' }, 400) .animate({ top: '100px' }, 400) .queue(function (next) { console.log('both animations finished'); next(); // must call next() to continue the queue });// custom numeric property animation$({ value: 0 }).animate( { value: 100 }, { duration: 800, step: function (now) { $('#counter').text(Math.round(now)); } });$('#box').stop(true, true); // clear queue and jump to end state
Pro Tip
Use event delegation, e.g. $(document).on('click', '.item', handler), instead of binding directly to elements that get added or removed dynamically -- it avoids re-binding on every DOM update and automatically covers future elements.
Was this cheat sheet helpful?
Explore Topics
#JQuery#JQueryCheatSheet#WebDevelopment#Beginner#Selectors#DOMManipulation#Events#AJAXUtilityMethods#Functions#CheatSheet#SkillVeris
