Guia Rápido de jQuery

Referência rápida para travessia do DOM, pseudo-seletores personalizados e ganchos de manipulação no jQuery.

Navegação no DOM (DOM Traversal)

$(.box)
  .children(p)        // Filhos diretos que correspondem ao seletor
  .closest(div)       // Ancestral mais próximo correspondente ao seletor
  .filter(:selected)  // Reduz o conjunto aos elementos correspondentes
  .find(span)         // Descendentes correspondentes ao seletor
  .has(ul)            // Elementos que contêm descendentes correspondentes
  .first()              // Primeiro elemento do conjunto
  .next(div)          // Irmão imediatamente posterior
  .nextUntil(footer)  // Todos os irmãos seguintes até o seletor
  .parent()             // Elemento pai direto
  .siblings()           // Todos os elementos irmãos

Seletores Customizados Avançados

Estendendo expressões de pseudo-classes no jQuery:

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

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

Hooks de CSS Customizados

Interceptando leituras e gravações de estilos com $.cssHooks:

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

// Tratar propriedade personalizada sem unidades "px" padrão
$.cssNumber["someCustomProp"] = true

Hooks de Etapas de Animação

$.fn.step.myEffect = function (fx) {
  // Lógica intermediária personalizada de quadros de animação
}