Шпаргалка з jQuery

Безкоштовно

Доступний для пошуку та друку довідник з jQuery — селектори, маніпуляції з DOM, події, ефекти, обхід елементів, AJAX і помічники для форм. Безкоштовно.

Селектори

$('#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

$(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

$('#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

$('#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()

Отримати обчислену висоту в пікселях

Події

$('#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

Елемент, що викликав подію

Ефекти та анімація

$('#box').show()

Показати прихований елемент

$('#box').hide()

Приховати елемент

$('#box').toggle()

Перемкнути видимість

$('#box').fadeIn(300)

Плавно показати елемент

$('#box').fadeOut(300)

Плавно приховати елемент

$('#box').fadeTo(300, 0.5)

Плавно змінити до заданої прозорості

$('#box').slideUp()

Згорнути елемент вгору (collapse)

$('#box').slideDown()

Розгорнути елемент вниз (expand)

$('#box').slideToggle()

Перемкнути анімацію ковзання

$('#box').animate({left: 100})

Анімувати CSS-властивості

$('#box').stop()

Зупинити поточну анімацію

$('#box').delay(500).fadeIn()

Затримати наступний ефект у черзі

Обхід дерева

$('#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

$.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: {}})

Встановити значення за замовчуванням для всіх запитів

Форми

$('#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)

Вимкнути елемент керування форми

Утиліти

$.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”.

Потрібна допомога?

Виникла проблема з цим інструментом? Повідомте нас.

Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.

<iframe src="https://tweakee.com/uk/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>