jQuery Spiekbrief

Beknopte handleiding voor jQuery-traversal, aangepaste pseudo-selectors en DOM-manipulatiehooks.

DOM-traversal

$(.box)
  .children(p)        // Directe kinderen die overeenkomen met de selector
  .closest(div)       // Dichtstbijzijnde voorouder die overeenkomt met de selector
  .filter(:selected)  // Beperk selectie tot overeenkomende elementen
  .find(span)         // Afstammelingen die overeenkomen met de selector
  .has(ul)            // Elementen die overeenkomende afstammelingen bevatten
  .first()              // Eerste element van overeenkomende set
  .next(div)          // Direct volgend zusterelement
  .nextUntil(footer)  // Alle volgende zusterelementen tot aan de selector
  .parent()             // Direct bovenliggend element
  .siblings()           // Alle zusterelementen

Geavanceerde aangepaste selectors

Breid de pseudoklasse-expressies van jQuery uit:

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

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

Aangepaste CSS-hooks

Onderschep het lezen en schrijven van stijleigenschappen met $.cssHooks:

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

// Behandel eigenschap zonder standaard "px"-eenheden
$.cssNumber["someCustomProp"] = true

Animatiestap-hooks

$.fn.step.myEffect = function (fx) {
  // Aangepaste tussenliggende animatieframelogica
}