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)

Изричен handler за готовност на документа

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

Прикача handler за събитие

$('#btn').off('click')

Откача handler-и за събития

$('#btn').click(fn)

Съкратен handler за click

$('#form').submit(fn)

Обработва изпращане на форма

$('#sel').change(fn)

Обработва промени на стойност

$('#in').keyup(fn)

Обработва key-up в поле

$('#list').on('click', '.item', fn)

Делегирано събитие за динамични деца

$('#btn').trigger('click')

Програмно задейства събитие

$('#btn').one('click', fn)

Изпълнява handler най-много веднъж

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

Превключва slide анимация

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

Изпълнява callback при успех

.fail(function (err) {})

Изпълнява callback при неуспех

.always(function () {})

Изпълнява callback след завършване

$.ajaxSetup({headers: {}})

Задава стойности по подразбиране за всички заявки

Форми

$('#form').serialize()

Кодира данните от формата като заявков низ

$('#form').serializeArray()

Кодира данните от формата като масив

$('#name').val()

Чете стойност на поле

$('#name').val('Ada')

Записва стойност на поле

$(':input')

Избира всички input елементи на формата

$('#cb').is(':checked')

Проверява дали чекбокс е отметнат

$('#sel option:selected')

Връща избраната опция

$('#in').focus()

Премества фокуса към поле

$('#form').on('submit', fn)

Обработва събитието submit на формата

$('#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/bg/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>