jQuery Cheatsheet

Quick reference for jQuery traversal, custom pseudo-selectors, and DOM manipulation hooks.

DOM Traversal

$('.box')
  .children('p')        // Immediate children matching selector
  .closest('div')       // Nearest ancestor matching selector
  .filter(':selected')  // Reduce set to matching elements
  .find('span')         // Descendants matching selector
  .has('ul')            // Elements containing matching descendants
  .first()              // First element of matched set
  .next('div')          // Immediately following sibling
  .nextUntil('footer')  // All following siblings up to selector
  .parent()             // Immediate parent element
  .siblings()           // All sibling elements

Advanced Custom Selectors

Extend jQuery's pseudo-class expressions:

// Custom ':inline' selector
$.expr[':'].inline = function (el) {
  return $(el).css('display') === 'inline'
}

// Usage
$('span:inline').addClass('highlight')

Custom CSS Hooks

Intercept property reads and writes with $.cssHooks:

$.cssHooks.someCustomProp = {
  get: function (elem, computed, extra) {
    return $.css(elem, 'transform')
  },
  set: function (elem, value) {
    elem.style.transform = value
  }
}

// Treat custom property without default 'px' units
$.cssNumber["someCustomProp"] = true

Animation Step Hooks

$.fn.step.myEffect = function (fx) {
  // Custom intermediate animation frame logic
}
```\n