Ściągawka z jQuery

Szybki przewodnik po trawersowaniu DOM, niestandardowych pseudoselektorach i hookach manipulacji w jQuery.

Przechodzenie po drzewie DOM (Traversal)

$(.box)
  .children(p)        // Bezpośrednie elementy potomne pasujące do selektora
  .closest(div)       // Najbliższy przodek pasujący do selektora
  .filter(:selected)  // Ogranicza zbiór do pasujących elementów
  .find(span)         // Wszyscy potomkowie pasujący do selektora
  .has(ul)            // Elementy zawierające pasujących potomków
  .first()              // Pierwszy element dopasowanego zbioru
  .next(div)          // Bezpośrednio następujący element rodzeństwa
  .nextUntil(footer)  // Wszyscy kolejni bracia aż do zadanego selektora
  .parent()             // Bezpośredni rodzic
  .siblings()           // Wszystkie elementy rodzeństwa

Zaawansowane selektory niestandardowe

Rozszerzanie wyrażeń pseudoklas w jQuery:

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

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

Niestandardowe hooki CSS

Przechwytywanie odczytu i zapisu właściwości stylów z $.cssHooks:

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

// Właściwość bez domyślnej jednostki "px"
$.cssNumber["someCustomProp"] = true

Hooki kroków animacji

$.fn.step.myEffect = function (fx) {
  // Niestandardowa logika klatek pośrednich animacji
}