Ghid Rapid jQuery

Ghid rapid pentru parcurgerea DOM-ului, pseudo-selectori personalizați și hook-uri de manipulare în jQuery.

Parcurgerea DOM-ului (DOM Traversal)

$(.box)
  .children(p)        // Copii imediați ce corespund selectorului
  .closest(div)       // Cel mai apropiat strămoș ce corespunde selectorului
  .filter(:selected)  // Reduce selecția la elementele potrivite
  .find(span)         // Descendenți ce corespund selectorului
  .has(ul)            // Elemente ce conțin descendenți potriviți
  .first()              // Primul element din colecție
  .next(div)          // Fratele imediat următor
  .nextUntil(footer)  // Toți frații următori până la selector
  .parent()             // Părintele direct
  .siblings()           // Toate elementele frate

Selectori personalizați avansați

Extinderea expresiilor de pseudo-clase în jQuery:

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

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

Hook-uri CSS personalizate

Interceptarea citirii și scrierii stilurilor cu $.cssHooks:

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

// Proprietate personalizată fără unități implicite "px"
$.cssNumber["someCustomProp"] = true

Hook-uri pentru pași de animație

$.fn.step.myEffect = function (fx) {
  // Logică personalizată pentru cadre intermediare de animație
}