The Ultimate jQuery Cheatsheet

// ── Basic Selectors ──
$('p')                   // all <p> elements
$('.class')              // elements with class
$('#id')                  // element with id
$('div.class')           // div with class
$('p, .class')           // union (multiple selectors)

// ── Hierarchy Selectors ──
$('parent > child')      // direct children only
$('ancestor descendant') // all descendants
$('prev + next')         // adjacent sibling (next)
$('prev ~ siblings')     // general siblings

// ── Attribute Selectors ──
$('[name="email"]')      // exact match
$('[type^="text"]')      // starts with
$('[class$="active"]')   // ends with
$('[href*="example"]')   // contains
$('[data-id]')           // has attribute
$('[data-role!="admin"]') // not equal

// ── Filters ──
$('li:first')            // first element
$('li:last')             // last element
$('li:even')             // even indexed (0, 2, 4...)
$('li:odd')              // odd indexed (1, 3, 5...)
$('li:eq(2)')            // element at index 2
$('li:gt(3)')            // greater than index 3
$('li:lt(3)')            // less than index 3
$('div:visible')         // visible elements
$('div:hidden')          // hidden elements
$('input:enabled')       // enabled inputs
$('input:disabled')      // disabled inputs
$('input:checked')       // checked checkboxes
$('input:selected')      // selected options
$('div:animated')        // currently animated
$('p:has(a)')            // p containing an anchor
$('p:contains("text")')  // containing text

// ── Traversal ──
$('div').find('p')              // descendants
$('div').children('p')          // direct children
$('p').parent()                 // direct parent
$('li').parents('.nav')         // all ancestors matching
$('li').closest('.container')   // first ancestor matching
$('p').siblings()                // all siblings
$('p').next()                    // next sibling
$('p').prev()                    // previous sibling
$('p').nextAll()                 // all next siblings
$('p').prevAll()                 // all previous siblings
$('div').first()                 // first in set
$('div').last()                  // last in set
$('div').eq(0)                   // element at index
$('div').filter('.active')       // filter set
$('div').not('.active')          // exclude
$('div').has('p')                // has descendant
$('div').add('span')             // add elements to set

// ── Get/Set Content ──
$('div').html()           // innerHTML
$('div').html('<p>new</p>')  // set innerHTML
$('div').text()            // textContent
$('div').text('hello')     // set textContent
$('input').val()           // input value
$('input').val('hello')    // set input value

// ── Attributes ──
$('a').attr('href')                    // get attribute
$('a').attr('href', 'https://example.com') // set attribute
$('a').removeAttr('target')              // remove
$('div').prop('disabled', true)          // set property
$('input').prop('checked')               // get checked
$('img').data('id')                      // data-* attribute
$('img').data('id', 42)                  // set data-*

// ── CSS Classes ──
$('div').addClass('active')
$('div').removeClass('active')
$('div').toggleClass('active')
$('div').hasClass('active')             // boolean check

// ── CSS Styles ──
$('div').css('color', 'red')
$('div').css({ color: 'red', 'font-size': '16px' })
$('div').css('color')                    // get computed style

// ── Create & Insert ──
const $el = $('<div class="box">Hello</div>');
$('body').append($el)       // insert at end (inside)
$('body').prepend($el)      // insert at start (inside)
$('div').after($el)         // after element (outside)
$('div').before($el)        // before element (outside)
$('<p>text</p>').appendTo('#container')

// ── Remove & Clone ──
$('div').remove()           // remove from DOM
$('div').empty()            // remove contents
$('div').detach()           // remove but keep data/events
const $clone = $('div').clone(true)  // deep clone with events

// ── Dimensions ──
$('div').width()            // inner width (no padding)
$('div').height()           // inner height
$('div').innerWidth()       // width + padding
$('div').innerHeight()      // height + padding
$('div').outerWidth()       // width + padding + border
$('div').outerWidth(true)   // + margin
$('div').offset()           // {top, left} relative to document
$('div').position()         // {top, left} relative to parent

// ── Each / Map ──
$('li').each(function(index, element) {
  console.log(index, $(this).text());
});
const texts = $('li').map(function() {
  return $(this).text();
}).get();

// ── Bind Events ──
$('button').on('click', function(e) {
  console.log('Clicked!', $(this).text());
});
$('button').click(handler)           // shorthand
$('button').dblclick(handler)

// ── Event Delegation (critical!) ──
$('#list').on('click', 'li.item', function(e) {
  $(this).toggleClass('selected');
});

// ── Multiple Events ──
$('input').on('focus blur', function(e) {
  $(this).toggleClass('focused');
});

// ── Namespace Events ──
$('div').on('click.namespace', handler);
$('div').off('.namespace');            // remove all namespaced
$('div').off('click.namespace');       // remove specific

// ── One-time Handler ──
$('button').one('click', handler);

// ── Trigger Events ──
$('form').trigger('submit');
$('input').triggerHandler('focus');  // without default

// ── Event Object ──
$('a').on('click', function(e) {
  e.preventDefault();    // prevent default action
  e.stopPropagation();   // stop bubbling
  e.stopImmediatePropagation(); // stop all handlers
  e.type                 // 'click'
  e.target               // element that triggered
  e.currentTarget        // element handling
  e.pageX, e.pageY       // mouse position
  e.which                // key/button code
  e.data                 // extra data passed
});

// ── Hover ──
$('tr').hover(
  function() { $(this).addClass('hover'); },
  function() { $(this).removeClass('hover'); }
);

// ── Keyboard ──
$(document).on('keydown', function(e) {
  if (e.key === 'Enter') { ... }
  if (e.key === 'Escape') { ... }
  if (e.ctrlKey && e.key === 's') { e.preventDefault(); }
});

// ── Common Events ──
// click, dblclick, mouseenter, mouseleave,
// mouseover, mouseout, mousemove, mousedown, mouseup,
// keydown, keyup, keypress,
// focus, blur, change, input, submit,
// scroll, resize, load, unload, error

// ── GET Request ──
$.get('/api/users', function(data) {
  console.log(data);
});

// ── GET with Parameters ──
$.get('/api/users', { page: 1, limit: 10 }, function(data) {
  console.log(data);
});

// ── POST Request ──
$.post('/api/users', JSON.stringify({ name: 'Alice' }), function(data) {
  console.log(data);
});

// ── Full $.ajax ──
$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json',
  contentType: 'application/json',
  headers: { 'Authorization': 'Bearer token' },
  data: { page: 1 },
  timeout: 5000,
  success: function(data, textStatus, jqXHR) {
    console.log(data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error(textStatus, errorThrown);
  },
  complete: function() {
    console.log('Request finished');
  }
});

// ── Promise-based (Modern) ──
$.ajax('/api/users').then(
  function(data) { console.log(data); },
  function(err) { console.error(err); }
);

// ── Fetch All ──
$.when(
  $.get('/api/users'),
  $.get('/api/orders')
).then(function(users, orders) {
  console.log(users[0], orders[0]);
});

// ── Chain Requests ──
$.get('/api/user/1')
  .then(function(user) { return $.get('/api/orders?user=' + user.id); })
  .then(function(orders) { console.log(orders); })
  .catch(function(err) { console.error(err); });

// ── Basic Effects ──
$('div').show()               // display: block
$('div').hide()               // display: none
$('div').toggle()             // toggle visibility
$('div').show('fast')         // 200ms
$('div').show(400)            // 400ms
$('div').show(function() {})   // callback

// ── Fading ──
$('div').fadeIn()              // fade in
$('div').fadeOut()             // fade out
$('div').fadeToggle()          // toggle fade
$('div').fadeTo('fast', 0.5)  // fade to opacity 0.5

// ── Sliding ──
$('div').slideDown()          // slide down (expand)
$('div').slideUp()            // slide up (collapse)
$('div').slideToggle()        // toggle slide

// ── Custom Animation ──
$('div').animate({
  opacity: 0.5,
  left: '+=50px',
  height: '200px'
}, {
  duration: 400,
  easing: 'swing',            // 'linear' or 'swing'
  complete: function() {},
  step: function(now, tween) {},
  queue: true,                // queue animation
  start: function() {},
  done: function() {},
  fail: function() {},
  always: function() {},
});

// ── Stop Animation ──
$('div').stop()                // stop current
$('div').stop(true)            // stop all queued
$('div').stop(true, true)      // jump to end
$('div').finish()              // complete all queued

// ── Delay ──
$('div').slideUp(300).delay(500).fadeIn(300);

// ── Promise Interface ──
$('div').animate({left: 200}, 1000).promise().then(function() {
  console.log('Animation done');
});