Aide-mémoire jQuery

Référence rapide pour le parcours du DOM, les pseudo-sélecteurs personnalisés et les hooks de manipulation jQuery.

Parcours du DOM (DOM Traversal)

$(.box)
  .children(p)        // Enfants directs correspondant au sélecteur
  .closest(div)       // Plus proche ancêtre correspondant au sélecteur
  .filter(:selected)  // Réduit la sélection aux éléments correspondants
  .find(span)         // Descendants correspondant au sélecteur
  .has(ul)            // Éléments contenant des descendants correspondants
  .first()              // Premier élément de la sélection
  .next(div)          // Élément frère immédiatement suivant
  .nextUntil(footer)  // Tous les frères suivants jusqu au sélecteur
  .parent()             // Élément parent direct
  .siblings()           // Tous les éléments frères

Sélecteurs personnalisés avancés

Étendre les expressions de pseudo-classes jQuery :

// Sélecteur personnalisé ":inline"
$.expr[:].inline = function (el) {
  return $(el).css(display) === inline
}

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

Hooks CSS personnalisés

Intercepter les lectures et écritures de styles avec $.cssHooks :

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

// Traiter la propriété personnalisée sans l unité "px" par défaut
$.cssNumber["someCustomProp"] = true

Hooks d étapes d animation

$.fn.step.myEffect = function (fx) {
  // Logique personnalisée pour les trames intermédiaires de l animation
}