jQuery cheat sheet

A scannable jQuery reference: 13 short snippets across 7 topics, each linking back to the lesson it came from.

At a glance

Topic	What it covers
Selectors and traversal	$ is a function that takes a CSS selector and returns a jQuery object — a wrapper around an array of matched DOM	lesson
Events, effects and attributes	Delegation is the important one. A handler bound to a row disappears with that row, but a handler bound to the list	lesson
AJAX helpers and why modern code moves on	The ajax family, its Deferred objects, and an honest comparison with fetch and the native APIs that replaced the rest	lesson
Setting up jQuery and the module story	Nothing else in the rest of this course changes between versions 3 and 4. If your code uses on, attr and the traversal	lesson
Performance, event delegation and memory	Cache selections, delegate from a stable root, avoid layout thrashing, and find the leak patterns that grow a	lesson
Testing jQuery code	Run jQuery under jsdom with Vitest or Jest, simulate real events, assert on the DOM, test a plugin's lifecycle, and	lesson
Migrating off jQuery to vanilla JavaScript	The point of the incremental order is that the last step is the only one where jQuery disappears — and by then almost	lesson

Quick snippets

Selectors and traversal

The jQuery object

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // runs after the HTML is parsed
  $(function () {
    $('.card').addClass('ready');
  });
</script>

The jQuery object

// a context argument scopes the search and speeds it up
$('li', $list);          // same as $list.find('li')

// plain DOM methods still work on the wrapped elements
$('#main')[0].scrollTop = 0;
$('#main').get(0);       // explicit and readable

Chaining and set behaviour

$('.row')
  .filter('[data-active="1"]')
  .addClass('highlight')
  .find('.label')
  .text('Active')
  .end()                 // step back to the filtered rows
  .css('opacity', 1);

// each() is for side effects; map() gives you plain values
const ids = $('.row').map(function (i, el) {
  return el.dataset.id;
}).get();                       // ["7", "9"] — a real array

Full lesson: Selectors and traversal →

Events, effects and attributes

Show, hide and animate

$('#panel').hide();                    // instant
$('#panel').slideDown(200);             // duration in ms
$('#panel').fadeTo(300, 0.5);           // fade to a given opacity
$('#panel').toggle('fast');             // 'slow' | 'fast' | ms

$('#panel').animate({ opacity: 1, marginTop: '12px' }, 400, 'swing', function () {
  console.log('finished');
});

$('#panel').stop(true, true);           // clear queue, jump to the end state

Show, hide and animate

// jQuery animations are queued per element: two rapid clicks queue two runs
$('#panel').stop(true, true).slideToggle(200);

// prefers-reduced-motion aware (jQuery has no built-in helper)
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
$('#panel').stop(true, true)[reduce ? 'show' : 'slideDown'](200);

Attributes, classes and values

$('input#email').val();                  // reads the current value
$('input#email').val('[email protected]');          // writes it

$('#agree').prop('checked', true);       // boolean property - use prop
$('#link').attr('href', '/next');        // attribute - use attr
$('#link').removeAttr('target');

$('.card').addClass('on').removeClass('off').toggleClass('wide', isWide);
$('.card').hasClass('on');               // boolean, no set returned

$('#card').data('userId');               // reads data-user-id, camelCased

Full lesson: Events, effects and attributes →

AJAX helpers and why modern code moves on

Why modern projects skip jQuery

// jQuery version
$('.remove').on('click', function () {
  $(this).closest('li').addClass('gone');
});

// native equivalent, about the same length today
document.addEventListener('click', (e) => {
  const btn = e.target.closest('.remove');
  if (!btn) return;
  btn.closest('li').classList.add('gone');
});

Full lesson: AJAX helpers and why modern code moves on →

Setting up jQuery and the module story

Four ways to load it

<!-- 1. CDN, classic script. Must come before any script that uses $ -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
        crossorigin="anonymous"></script>
<script src="/js/app.js"></script>

Four ways to load it

# 2. npm, for a bundler
npm install jquery
npm install --save-dev @types/jquery

# the slim build omits ajax and effects, saving about 20 KB minified
npm install [email protected]/dist/jquery.slim.min.js

What changed in jQuery 4

// Things that stop working in jQuery 4, with the replacement
// $.isFunction(fn)                 ->  typeof fn === 'function'
// $.isArray(list)                  ->  Array.isArray(list)
// $.trim(str)                      ->  str.trim()
// $.now()                          ->  Date.now()
// $('#x').bind('click', fn)        ->  $('#x').on('click', fn)
// $('#x').delegate('.y', 'c', fn)  ->  $('#x').on('c', '.y', fn)

// $.ajax still exists in the default build; the fetch-based path changes
// some edge cases around progress events and aborting, so test uploads.
$.ajax({ url: '/api/items', method: 'GET' }).done((items) => console.log(items));

Full lesson: Setting up jQuery and the module story →

Performance, event delegation and memory

Event delegation

// A common leak: a delegated handler on document that grows with each render.
// Wrong
function render(items) {
  items.forEach((item) => {
    $(document).on('click', '.item-' + item.id, () => select(item.id));   // new handler every render
  });
}

// Right: one handler, data read from the element
$(document).on('click.select', '.item', function () {
  select($(this).data('id'));
});

Full lesson: Performance, event delegation and memory →

Testing jQuery code

Setting up the environment

// vitest.config.js — jsdom gives you a document, jQuery runs on top of it
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./test/setup.js']
  }
});

Full lesson: Testing jQuery code →

Migrating off jQuery to vanilla JavaScript

Running the migration

<!-- jQuery Migrate logs deprecations to the console. Use it to find what breaks,
     then remove it. It is a diagnostic tool, not a runtime dependency. -->
<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/jquery-migrate-3.5.2.min.js"></script>

Full lesson: Migrating off jQuery to vanilla JavaScript →

FAQ

Is this jQuery cheat sheet free to use?

Yes. No sign-up and no tracking: the page is static, every example is on the page itself, and you can print it or save it as a one-page reference.

Where do the examples come from?

Every snippet is taken from the 7 lessons of the jQuery course on this site, and each section links back to the lesson it was pulled from.

How do I go deeper than a cheat sheet?

Open the full jQuery course — it carries the worked explanations, the edge cases and the exercises behind every line here.

HTML CSS JavaScript TypeScript HTML DOM AJAX

Last refreshed 2026-09-27.