Шпаргалка по jQuery

Краткий справочник по обходу DOM, пользовательским псевдоселекторам и хукам стилей в jQuery.

Обход дерева DOM (DOM Traversal)

$(.box)
  .children(p)        // Прямые дочерние элементы, соответствующие селектору
  .closest(div)       // Ближайший предок, соответствующий селектору
  .filter(:selected)  // Сужает выборку до подходящих элементов
  .find(span)         // Все потомки, соответствующие селектору
  .has(ul)            // Элементы, содержащие подходящих потомков
  .first()              // Первый элемент в выборке
  .next(div)          // Непосредственно следующий соседний элемент
  .nextUntil(footer)  // Все последующие соседние элементы до указанного селектора
  .parent()             // Прямой родительский элемент
  .siblings()           // Все соседние элементы одного уровня

Расширенные пользовательские селекторы

Расширение выражений псевдоклассов в jQuery:

// Пользовательский селектор ":inline"
$.expr[:].inline = function (el) {
  return $(el).css(display) === inline
}

// Использование
$(span:inline).addClass(highlight)

Пользовательские хуки стилей (CSS Hooks)

Перехват чтения и записи стилей с помощью $.cssHooks:

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

// Свойство без автоматического добавления единиц "px"
$.cssNumber["someCustomProp"] = true

Хуки промежуточных шагов анимации

$.fn.step.myEffect = function (fx) {
  // Пользовательская логика для промежуточных кадров анимации
}