Cheat Sheet jQuery

Riferimento rapido per l attraversamento del DOM, pseudo-selettori personalizzati ed hook di manipolazione in jQuery.

Attraversamento del DOM

$(.box)
  .children(p)        // Figli diretti che corrispondono al selettore
  .closest(div)       // Antenato più vicino che corrisponde al selettore
  .filter(:selected)  // Riduce l insieme agli elementi corrispondenti
  .find(span)         // Discendenti che corrispondono al selettore
  .has(ul)            // Elementi che contengono discendenti corrispondenti
  .first()              // Primo elemento dell insieme selezionato
  .next(div)          // Elemento fratello immediatamente successivo
  .nextUntil(footer)  // Tutti i fratelli successivi fino al selettore
  .parent()             // Elemento genitore diretto
  .siblings()           // Tutti gli elementi fratelli

Selettori personalizzati avanzati

Estendere le espressioni delle pseudo-classi di jQuery:

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

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

Hook CSS personalizzati

Intercetta letture e scritture delle proprietà con $.cssHooks:

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

// Gestisce la proprietà senza l unità "px" predefinita
$.cssNumber["someCustomProp"] = true

Hook per step di animazione

$.fn.step.myEffect = function (fx) {
  // Logica personalizzata per frame intermedi di animazione
}