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

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?

Svelte Cheat Sheet

Redux Cheat Sheet