Ściąga jQuery

Bezpłatnie

Przeszukiwalny, gotowy do druku przewodnik po jQuery — selektory, manipulacja DOM, zdarzenia, efekty, przechodzenie po drzewie, AJAX i pomocniki formularzy. Za darmo.

Selektory

$('#id')

Wybierz element po jego id

$('.class')

Wybierz wszystkie elementy z klasą

$('div')

Wybierz wszystkie elementy danego znacznika

$('*')

Wybierz każdy element na stronie

$('[name="email"]')

Wybierz po wartości atrybutu

$('a[href^="https"]')

Selektor atrybutu zaczynającego się od

$('ul li:first')

Pierwszy dopasowany element

$('ul li:last')

Ostatni dopasowany element

$('tr:eq(2)')

Element pod indeksem (od 0)

$('li:not(.done)')

Wyklucz elementy pasujące do selektora

$(':checked')

Wszystkie zaznaczone pola wyboru/radio

$('div:visible')

Tylko aktualnie widoczne elementy

$('ul li')

Kombinator potomka

$('ul > li')

Kombinator bezpośredniego dziecka

Gotowość dokumentu i DOM

$(function () { /* ... */ });

Uruchom kod, gdy DOM jest gotowy

$(document).ready(fn)

Jawny handler gotowości dokumentu

$(window).on('load', fn)

Uruchom po załadowaniu wszystkich zasobów

$(this)

Opakuj bieżący element kontekstu

$(el)

Opakuj surowy węzeł DOM w jQuery

$('<div class="box"></div>')

Utwórz nowy element z HTML

$('#box')[0]

Pobierz bazowy węzeł DOM

$('#box').get(0)

Pobierz węzeł DOM przez .get()

$('.item').length

Zlicz dopasowane elementy

$('#box').is(':visible')

Sprawdź selektor względem zestawu

Manipulacja DOM

$('#box').html('<b>Hi</b>')

Ustaw wewnętrzny HTML

$('#box').text('Hello')

Ustaw treść tekstową (z eskejpowaniem)

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

Ustaw wartość pola formularza

$('#list').append('<li>x</li>')

Wstaw treść na końcu

$('#list').prepend('<li>x</li>')

Wstaw treść na początku

$('#box').before('<hr>')

Wstaw treść przed elementem

$('#box').after('<hr>')

Wstaw treść po elemencie

$('#box').remove()

Usuń element z DOM

$('#box').empty()

Usuń wszystkie węzły potomne

$('#box').clone()

Utwórz kopię elementu

$('#box').wrap('<div>')

Opakuj element w nowy HTML

$('#box').replaceWith('<p>')

Zastąp element w całości

Atrybuty i CSS

$('#img').attr('src')

Pobierz wartość atrybutu

$('#img').attr('alt', 'Logo')

Ustaw wartość atrybutu

$('#cb').prop('checked')

Pobierz właściwość DOM (checked/disabled)

$('#cb').prop('checked', true)

Ustaw właściwość DOM

$('#img').removeAttr('title')

Usuń atrybut

$('.box').addClass('active')

Dodaj klasę CSS

$('.box').removeClass('active')

Usuń klasę CSS

$('.box').toggleClass('open')

Przełącz klasę CSS wł./wył.

$('.box').hasClass('active')

Sprawdź, czy klasa jest obecna

$('#box').css('color', 'red')

Ustaw pojedynczą właściwość CSS

$('#box').css({top: 0, left: 0})

Ustaw wiele właściwości CSS

$('#box').width()

Pobierz obliczoną szerokość w pikselach

$('#box').height()

Pobierz obliczoną wysokość w pikselach

Zdarzenia

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

Podłącz handler zdarzenia

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

Odłącz handlery zdarzeń

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

Skrócony handler kliknięcia

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

Obsłuż wysłanie formularza

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

Obsłuż zmiany wartości

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

Obsłuż zwolnienie klawisza w polu

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

Delegowane zdarzenie dla dynamicznych dzieci

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

Programowo wyzwól zdarzenie

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

Uruchom handler co najwyżej raz

e.preventDefault()

Zatrzymaj domyślną akcję przeglądarki

e.stopPropagation()

Powstrzymaj propagację zdarzenia

e.target

Element, który wyzwolił zdarzenie

Efekty i animacja

$('#box').show()

Wyświetl ukryty element

$('#box').hide()

Ukryj element

$('#box').toggle()

Przełącz widoczność

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

Płynnie pokaż element

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

Płynnie ukryj element

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

Przejdź płynnie do danej przezroczystości

$('#box').slideUp()

Zwiń element w górę (collapse)

$('#box').slideDown()

Rozwiń element w dół (expand)

$('#box').slideToggle()

Przełącz animację wysuwania

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

Animuj właściwości CSS

$('#box').stop()

Zatrzymaj bieżącą animację

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

Opóźnij następny efekt w kolejce

Przeglądanie drzewa

$('#box').find('.item')

Znajdź potomków pasujących do selektora

$('#box').parent()

Pobierz bezpośredniego rodzica

$('#box').parents('.row')

Pobierz wszystkich przodków pasujących do selektora

$('#box').closest('.row')

Najbliższy pasujący przodek (lub element)

$('#box').children()

Pobierz bezpośrednie dzieci

$('#box').siblings()

Pobierz elementy rodzeństwa

$('#box').next()

Pobierz następne rodzeństwo

$('#box').prev()

Pobierz poprzednie rodzeństwo

$('.item').each(fn)

Iteruj po każdym dopasowanym elemencie

$('.item').filter('.on')

Zawęź zestaw przez selektor

$('.item').first()

Zawęź zestaw do pierwszego elementu

$('.item').eq(1)

Zawęź zestaw do jednego indeksu

AJAX

$.ajax({url: '/api', method: 'GET'})

Żądanie AJAX z pełną kontrolą

$.get('/api', fn)

Skrócone żądanie HTTP GET

$.post('/api', data, fn)

Skrócone żądanie HTTP POST

$.getJSON('/api.json', fn)

Żądanie GET oczekujące JSON

$('#box').load('/part.html')

Wczytaj HTML do elementu

$.ajax({dataType: 'json'})

Ustaw oczekiwany typ odpowiedzi

$.ajax({data: {q: 'x'}})

Wyślij parametry żądania

.done(function (res) {})

Uruchom callback przy powodzeniu

.fail(function (err) {})

Uruchom callback przy niepowodzeniu

.always(function () {})

Uruchom callback po zakończeniu

$.ajaxSetup({headers: {}})

Ustaw domyślne dla wszystkich żądań

Formularze

$('#form').serialize()

Zakoduj dane formularza jako ciąg zapytania

$('#form').serializeArray()

Zakoduj dane formularza jako tablicę

$('#name').val()

Odczytaj wartość pola

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

Zapisz wartość pola

$(':input')

Wybierz wszystkie pola wejściowe formularza

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

Sprawdź, czy pole wyboru jest zaznaczone

$('#sel option:selected')

Pobierz wybraną opcję

$('#in').focus()

Przenieś fokus na pole

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

Obsłuż zdarzenie wysłania formularza

$('#in').prop('disabled', true)

Wyłącz kontrolkę formularza

Narzędzia

$.each(arr, fn)

Iteruj po tablicy lub obiekcie

$.map(arr, fn)

Zbuduj nową tablicę z każdego elementu

$.grep(arr, fn)

Filtruj tablicę wg predykatu

$.extend({}, a, b)

Scal obiekty do celu

$.trim(' hi ')

Usuń białe znaki z początku/końca

$.inArray(2, arr)

Znajdź indeks elementu w tablicy

$.isArray(x)

Sprawdź, czy wartość jest tablicą

$.isFunction(x)

Sprawdź, czy wartość jest funkcją

$.parseJSON(str)

Sparsuj łańcuch JSON do obiektu

$.now()

Bieżący znacznik czasu w milisekundach

$.type(x)

Pobierz wewnętrzny typ wartości

Żaden wpis nie pasuje do „:q”.

Potrzebujesz pomocy?

Masz problem z tym narzędziem? Daj nam znać.

Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.

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