jQuery Spickzettel

Schnellreferenz für jQuery-DOM-Traversierung, benutzerdefinierte Pseudoselektoren und CSS-Hooks.

DOM-Traversierung

$(.box)
  .children(p)        // Direkte Kindelemente, die dem Selektor entsprechen
  .closest(div)       // Nächster Vorfahre, der dem Selektor entspricht
  .filter(:selected)  // Set auf passende Elemente reduzieren
  .find(span)         // Nachfahren, die dem Selektor entsprechen
  .has(ul)            // Elemente mit passenden Nachfahren
  .first()              // Erstes Element der Treffermenge
  .next(div)          // Unmittelbar folgendes Geschwisterelement
  .nextUntil(footer)  // Alle folgenden Geschwister bis zum Selektor
  .parent()             // Direktes Elternelement
  .siblings()           // Alle Geschwisterelemente

Erweiterte benutzerdefinierte Selektoren

jQuery-Pseudoklassen-Ausdrücke erweitern:

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

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

Benutzerdefinierte CSS-Hooks

Lesen und Schreiben von CSS-Eigenschaften mit $.cssHooks abfangen:

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

// Eigenschaft ohne automatische "px"-Einheit behandeln
$.cssNumber["someCustomProp"] = true

Animations-Schritt-Hooks

$.fn.step.myEffect = function (fx) {
  // Eigene Frame-Logik für Zwischenschritte der Animation
}