Шпаргалка по jQuery
Доступный для поиска и печати справочник по jQuery — селекторы, манипуляции с DOM, события, эффекты, обход элементов, AJAX и помощники для форм. Бесплатно.
Селекторы
14$('#id')
Выбрать элемент по id
$('.class')
Выбрать все элементы с классом
$('div')
Выбрать все элементы по имени тега
$('*')
Выбрать все элементы на странице
$('[name="email"]')
Выбрать по значению атрибута
$('a[href^="https"]')
Селектор атрибута «начинается с»
$('ul li:first')
Первый подходящий элемент
$('ul li:last')
Последний подходящий элемент
$('tr:eq(2)')
Элемент по индексу (с нуля)
$('li:not(.done)')
Исключить элементы, подходящие под селектор
$(':checked')
Все отмеченные чекбоксы/радио
$('div:visible')
Только видимые элементы
$('ul li')
Комбинатор потомка
$('ul > li')
Комбинатор прямого потомка
Готовность документа и DOM
10$(function () { /* ... */ });
Выполнить код после готовности DOM
$(document).ready(fn)
Явный обработчик готовности документа
$(window).on('load', fn)
Выполнить после загрузки всех ресурсов
$(this)
Обернуть текущий контекстный элемент
$(el)
Обернуть DOM-узел в jQuery
$('<div class="box"></div>')
Создать новый элемент из HTML
$('#box')[0]
Получить базовый DOM-узел
$('#box').get(0)
Получить DOM-узел через .get()
$('.item').length
Подсчитать подходящие элементы
$('#box').is(':visible')
Проверить селектор против набора
Манипуляции с DOM
12$('#box').html('<b>Hi</b>')
Задать внутренний HTML
$('#box').text('Hello')
Задать текстовое содержимое (экранированное)
$('#name').val('Ada')
Задать значение поля формы
$('#list').append('<li>x</li>')
Вставить содержимое в конец
$('#list').prepend('<li>x</li>')
Вставить содержимое в начало
$('#box').before('<hr>')
Вставить содержимое перед элементом
$('#box').after('<hr>')
Вставить содержимое после элемента
$('#box').remove()
Удалить элемент из DOM
$('#box').empty()
Удалить все дочерние узлы
$('#box').clone()
Создать копию элемента
$('#box').wrap('<div>')
Обернуть элемент в новый HTML
$('#box').replaceWith('<p>')
Полностью заменить элемент
Атрибуты и CSS
13$('#img').attr('src')
Получить значение атрибута
$('#img').attr('alt', 'Logo')
Задать значение атрибута
$('#cb').prop('checked')
Получить DOM-свойство (checked/disabled)
$('#cb').prop('checked', true)
Задать DOM-свойство
$('#img').removeAttr('title')
Удалить атрибут
$('.box').addClass('active')
Добавить CSS-класс
$('.box').removeClass('active')
Удалить CSS-класс
$('.box').toggleClass('open')
Переключить CSS-класс
$('.box').hasClass('active')
Проверить наличие класса
$('#box').css('color', 'red')
Задать одно CSS-свойство
$('#box').css({top: 0, left: 0})
Задать несколько CSS-свойств
$('#box').width()
Получить вычисленную ширину в пикселях
$('#box').height()
Получить вычисленную высоту в пикселях
События
12$('#btn').on('click', fn)
Назначить обработчик события
$('#btn').off('click')
Снять обработчики событий
$('#btn').click(fn)
Сокращённый обработчик клика
$('#form').submit(fn)
Обработать отправку формы
$('#sel').change(fn)
Обработать изменение значения
$('#in').keyup(fn)
Обработать отпускание клавиши в поле
$('#list').on('click', '.item', fn)
Делегированное событие для динамических детей
$('#btn').trigger('click')
Программно вызвать событие
$('#btn').one('click', fn)
Выполнить обработчик не более одного раза
e.preventDefault()
Отменить действие браузера по умолчанию
e.stopPropagation()
Остановить всплытие события
e.target
Элемент, вызвавший событие
Эффекты и анимация
12$('#box').show()
Показать скрытый элемент
$('#box').hide()
Скрыть элемент
$('#box').toggle()
Переключить видимость
$('#box').fadeIn(300)
Плавно проявить элемент
$('#box').fadeOut(300)
Плавно скрыть элемент
$('#box').fadeTo(300, 0.5)
Плавно довести до заданной прозрачности
$('#box').slideUp()
Свернуть элемент сдвигом вверх
$('#box').slideDown()
Развернуть элемент сдвигом вниз
$('#box').slideToggle()
Переключить анимацию сдвига
$('#box').animate({left: 100})
Анимировать CSS-свойства
$('#box').stop()
Остановить текущую анимацию
$('#box').delay(500).fadeIn()
Задержать следующий эффект в очереди
Обход дерева
12$('#box').find('.item')
Найти потомков по селектору
$('#box').parent()
Получить прямого родителя
$('#box').parents('.row')
Получить всех предков по селектору
$('#box').closest('.row')
Ближайший подходящий предок (или сам)
$('#box').children()
Получить прямых потомков
$('#box').siblings()
Получить соседние элементы
$('#box').next()
Получить следующий соседний элемент
$('#box').prev()
Получить предыдущий соседний элемент
$('.item').each(fn)
Перебрать каждый подходящий элемент
$('.item').filter('.on')
Сузить набор по селектору
$('.item').first()
Сузить набор до первого элемента
$('.item').eq(1)
Сузить набор до одного индекса
AJAX
11$.ajax({url: '/api', method: 'GET'})
AJAX-запрос с полным контролем
$.get('/api', fn)
Сокращённый HTTP GET-запрос
$.post('/api', data, fn)
Сокращённый HTTP POST-запрос
$.getJSON('/api.json', fn)
GET-запрос, ожидающий JSON
$('#box').load('/part.html')
Загрузить HTML в элемент
$.ajax({dataType: 'json'})
Задать ожидаемый тип ответа
$.ajax({data: {q: 'x'}})
Отправить параметры запроса
.done(function (res) {})
Выполнить колбэк при успехе
.fail(function (err) {})
Выполнить колбэк при ошибке
.always(function () {})
Выполнить колбэк после завершения
$.ajaxSetup({headers: {}})
Задать значения по умолчанию для всех запросов
Формы
10$('#form').serialize()
Закодировать данные формы как строку запроса
$('#form').serializeArray()
Закодировать данные формы как массив
$('#name').val()
Прочитать значение поля
$('#name').val('Ada')
Записать значение поля
$(':input')
Выбрать все поля ввода формы
$('#cb').is(':checked')
Проверить, отмечен ли чекбокс
$('#sel option:selected')
Получить выбранный вариант
$('#in').focus()
Переместить фокус на поле
$('#form').on('submit', fn)
Обработать событие отправки формы
$('#in').prop('disabled', true)
Отключить элемент управления формы
Утилиты
11$.each(arr, fn)
Перебрать массив или объект
$.map(arr, fn)
Создать новый массив из каждого элемента
$.grep(arr, fn)
Отфильтровать массив по предикату
$.extend({}, a, b)
Слить объекты в целевой
$.trim(' hi ')
Убрать пробелы в начале/конце
$.inArray(2, arr)
Найти индекс элемента в массиве
$.isArray(x)
Проверить, является ли значение массивом
$.isFunction(x)
Проверить, является ли значение функцией
$.parseJSON(str)
Разобрать JSON-строку в объект
$.now()
Текущая метка времени в миллисекундах
$.type(x)
Получить внутренний тип значения
Нет записей, соответствующих «:q».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.