Chuleta de jQuery

Referencia rápida para recorrido del DOM, pseudo-selectores personalizados y ganchos de manipulación en jQuery.

Recorrido del DOM (DOM Traversal)

$(.box)
  .children(p)        // Hijos directos que coinciden con el selector
  .closest(div)       // Ancestro más cercano que coincide con el selector
  .filter(:selected)  // Reduce el conjunto a los elementos coincidentes
  .find(span)         // Descendientes que coinciden con el selector
  .has(ul)            // Elementos que contienen descendientes coincidentes
  .first()              // Primer elemento del conjunto
  .next(div)          // Hermano inmediatamente posterior
  .nextUntil(footer)  // Todos los hermanos posteriores hasta el selector
  .parent()             // Elemento padre directo
  .siblings()           // Todos los elementos hermanos

Selectores personalizados avanzados

Extender las expresiones de pseudoclases en jQuery:

// Selector personalizado ":inline"
$.expr[:].inline = function (el) {
  return $(el).css(display) === inline
}

// Uso
$(span:inline).addClass(highlight)

Ganchos CSS personalizados (CSS Hooks)

Interceptar lecturas y escrituras de propiedades con $.cssHooks:

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

// Tratar propiedad personalizada sin unidades "px" por defecto
$.cssNumber["someCustomProp"] = true

Ganchos de pasos de animación

$.fn.step.myEffect = function (fx) {
  // Lógica personalizada para fotogramas intermedios de animación
}