Перейти к основному содержимому

Справочник по jQuery

СПРАВОЧНИК

Область справочника​

Краткая шпаргалка по API jQuery для быстрого поиска синтаксиса. Не заменяет обзор и теорию. Полные описания, edge cases и устаревшие методы — на api.jquery.com. Структура таблиц ориентирована на overapi.com/jquery.

Содержание​

Глобальные объекты​

ВызовНазначение
$(selector)выбор элементов, обёртка DOM
$(element)обернуть нативный узел
$(html)создать из строки HTML
$(callback)DOMContentLoaded
jQuery.noConflict()вернуть $ другой библиотеке
jQuery.isReadyDOM уже готов
const $jq = jQuery.noConflict();
$jq('#app').hide();

Селекторы и фильтры​

МетодОписание
.filter(selector)оставить подходящие под селектор
.not(selector)исключить
.is(selector)есть ли совпадение
.has(selector)потомки по селектору
.first() / .last()первый / последний
.eq(n)элемент с индексом n
.even() / .odd()чётные / нечётные индексы
.slice(start, end)срез коллекции
$('li').filter('.active').first().addClass('highlight');

Обход DOM​

МетодОписание
.children(sel)прямые потомки
.find(sel)все потомки (вглубь)
.parent() / .parents(sel)родитель / предки
.closest(sel)ближайший предок
.siblings(sel)соседи
.next() / .prev()следующий / предыдущий сосед
.end()вернуться к предыдущей коллекции в цепочке
$('#menu').find('a').parent().addClass('nav-item');

Содержимое, атрибуты, CSS​

МетодОписание
.text() / .text(val)текст без HTML
.html() / .html(val)HTML внутри
.val() / .val(v)значение input/select/textarea
.attr(name) / .attr(name, val)HTML-атрибут
.prop(name) / .prop(name, val)свойство DOM
.removeAttr(name)удалить атрибут
.data(key) / .data(key, val)data-* кэш
.css(prop) / .css(prop, val) / .css({})inline-стили
$('input[name=email]').val('user@example.com');
$('#box').css({ width: '100%', marginTop: 10 });

Классы и видимость​

МетодОписание
.addClass(c)добавить класс
.removeClass(c)убрать класс
.toggleClass(c)переключить
.hasClass(c)проверка
.hide() / .show()display: none / восстановить
.toggle()показать/скрыть
.width() / .height()размеры
.offset() / .position()координаты

Манипуляции с DOM​

МетодОписание
.append(content)в конец внутри
.prepend(content)в начало внутри
.after(content)после элемента
.before(content)перед элементом
.appendTo(target)перенести внутрь target
.remove()удалить из DOM
.empty()очистить потомков
.clone(deep)копия
.replaceWith(content)заменить элемент
.wrap(html)обернуть
const $row = $('<tr><td>Новая строка</td></tr>');
$('#table tbody').append($row);

События​

Предпочтительно .on() / .off():

МетодОписание
.on(events, handler)подписаться
.on(events, sel, handler)делегирование
.off(events, handler)отписаться
.one(events, handler)один раз
.trigger(type)вызвать событие
.hover(fnIn, fnOut)mouseenter + mouseleave
$(document).on('click', '.btn-delete', function () {
  $(this).closest('tr').remove();
});

$('#form').on('submit', function (e) {
  e.preventDefault();
});

Устаревшие (в старом коде): .click(), .bind(), .live() — в новом коде не использовать.

Эффекты​

МетодОписание
.fadeIn(ms) / .fadeOut(ms)прозрачность
.fadeToggle(ms)переключить fade
.slideDown(ms) / .slideUp(ms)высота
.slideToggle(ms)переключить slide
.animate(props, ms)произвольные CSS-свойства
.stop()остановить анимацию
.delay(ms)пауза в цепочке
$('#notice').fadeIn(400).delay(2000).fadeOut(400);

AJAX​

МетодОписание
$.ajax(options)полный контроль
$.get(url, data, cb)GET
$.post(url, data, cb)POST
$.getJSON(url, cb)GET + JSON
$.load(url, sel)вставить фрагмент в элемент
.serialize()данные формы как query string
.serializeArray()массив {name, value}
$.getJSON('/api/items', { page: 1 }, function (items) {
  items.forEach(item => $('#list').append(`<li>${item.title}</li>`));
});

$('#myForm').on('submit', function (e) {
  e.preventDefault();
  $.post('/save', $(this).serialize());
});

Типичные опции $.ajax​

ОпцияЗначение
urlадрес
method / typeGET, POST, …
dataтело или query
contentTypeтип тела
dataTypeожидаемый ответ (json, html, …)
success / error / completeколбэки
headersзаголовки

Утилиты $.*​

МетодОписание
$.each(arr, fn)итерация массива/объекта
$.map(arr, fn)преобразование
$.grep(arr, fn)фильтр
$.inArray(val, arr)индекс
$.extend(target, …)слияние объектов
$.isArray / $.isFunction / $.isPlainObjectпроверки типов
$.parseJSON(str)разбор JSON (устарело — JSON.parse)
$.now()Date.now()
$.each({ a: 1, b: 2 }, function (key, val) {
  console.log(key, val);
});

Deferred / Promise​

МетодОписание
$.Deferred()создать deferred
.resolve() / .reject()завершить
.done(fn) / .fail(fn) / .always(fn)подписки
$.when(p1, p2, …)дождаться нескольких
const d = $.Deferred();
setTimeout(() => d.resolve('ok'), 100);
d.done(console.log);

$.when($.get('/a'), $.get('/b')).done(function () {
  console.log('оба готовы');
});

В jQuery 3.x $.ajax поддерживает .then() как Promise.

Плагины и расширение​

Шаблон плагина:

(function ($) {
  $.fn.myPlugin = function (options) {
    const settings = $.extend({ color: 'yellow' }, options);
    return this.each(function () {
      $(this).css('background-color', settings.color);
    });
  };
})(jQuery);
РесурсURL
Ядро jQueryapi.jquery.com
jQuery UIapi.jqueryui.com
Загрузкаjquery.com/download
Исходникиgithub.com/jquery/jquery
Sizzlegithub.com/jquery/sizzle
Migrate (диагностика)github.com/jquery/jquery-migrate

Быстрое сравнение с нативным JS​

jQueryНативный эквивалент
$('#id')document.getElementById('id')
$('.c')document.querySelectorAll('.c')
$(fn)document.addEventListener('DOMContentLoaded', fn)
.on('click', fn).addEventListener('click', fn)
.addClass('x').classList.add('x')
$.get(url)fetch(url).then(r => r.text())

Подробный обзор и сценарии — в jQuery — обзор библиотеки.

Содержание