jQuery Fusklapp

Snabbreferens för DOM-traversering, anpassade pseudoselektorer och manipulerings-hooks i jQuery.

DOM-traversering

$(.box)
  .children(p)        // Direkta underordnade element som matchar selektorn
  .closest(div)       // Närmaste förfader som matchar selektorn
  .filter(:selected)  // Filtrera urvalet till matchande element
  .find(span)         // Ättlingar som matchar selektorn
  .has(ul)            // Element som innehåller matchande ättlingar
  .first()              // Första elementet i urvalet
  .next(div)          // Omedelbart följande syskonelement
  .nextUntil(footer)  // Alla följande syskon fram till selektorn
  .parent()             // Direkt överordnat element
  .siblings()           // Alla syskonelement

Avancerade anpassade selektorer

Utöka pseudoklassuttryck i jQuery:

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

// Användning
$(span:inline).addClass(highlight)

Anpassade CSS-hooks

Fånga läsning och skrivning av egenskaper med $.cssHooks:

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

// Hantera egenskap utan standard "px"-enheter
$.cssNumber["someCustomProp"] = true

Animationssteg-hooks

$.fn.step.myEffect = function (fx) {
  // Anpassad logik för mellanliggande animationsrutor
}