Foaie de referință jQuery

Gratuit

O referință jQuery căutabilă și imprimabilă — selectori, manipularea DOM, evenimente, efecte, parcurgere, AJAX și utilitare pentru formulare. Gratuit.

Selectori

$('#id')

Selectează un element după id-ul său

$('.class')

Selectează toate elementele cu o clasă

$('div')

Selectează toate elementele cu un nume de tag

$('*')

Selectează fiecare element din pagină

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

Selectează după o valoare de atribut

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

Selector atribut începe-cu

$('ul li:first')

Primul element potrivit

$('ul li:last')

Ultimul element potrivit

$('tr:eq(2)')

Element la un index bazat pe zero

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

Exclude elementele care se potrivesc unui selector

$(':checked')

Toate checkbox-urile/radio-urile bifate

$('div:visible')

Doar elementele vizibile curent

$('ul li')

Combinator descendent

$('ul > li')

Combinator copil direct

Document ready și DOM

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

Rulează cod odată ce DOM-ul e gata

$(document).ready(fn)

Handler explicit pentru document-ready

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

Rulează după ce toate resursele s-au încărcat

$(this)

Învelește elementul de context curent

$(el)

Învelește un nod DOM brut în jQuery

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

Creează un element nou din HTML

$('#box')[0]

Obține nodul DOM subiacent

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

Obține nodul DOM prin .get()

$('.item').length

Numără elementele potrivite

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

Testează un selector pe set

Manipulare DOM

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

Setează HTML-ul intern

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

Setează conținutul text (escapat)

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

Setează valoarea unui câmp de formular

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

Inserează conținut la sfârșit

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

Inserează conținut la început

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

Inserează conținut înaintea elementului

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

Inserează conținut după element

$('#box').remove()

Elimină elementul din DOM

$('#box').empty()

Elimină toate nodurile copil

$('#box').clone()

Creează o copie a elementului

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

Învelește elementul în HTML nou

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

Înlocuiește elementul în întregime

Atribute și CSS

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

Obține o valoare de atribut

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

Setează o valoare de atribut

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

Obține o proprietate DOM (checked/disabled)

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

Setează o proprietate DOM

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

Elimină un atribut

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

Adaugă o clasă CSS

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

Elimină o clasă CSS

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

Comută o clasă CSS pornit/oprit

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

Testează dacă o clasă e prezentă

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

Setează o singură proprietate CSS

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

Setează mai multe proprietăți CSS

$('#box').width()

Obține lățimea calculată în pixeli

$('#box').height()

Obține înălțimea calculată în pixeli

Evenimente

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

Atașează un handler de eveniment

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

Detașează handlere de evenimente

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

Handler de click prescurtat

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

Tratează trimiterea formularului

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

Tratează modificările de valoare

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

Tratează key-up într-un câmp

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

Eveniment delegat pentru copii dinamici

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

Declanșează un eveniment programatic

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

Rulează un handler cel mult o dată

e.preventDefault()

Oprește acțiunea implicită a browserului

e.stopPropagation()

Oprește propagarea evenimentului

e.target

Elementul care a declanșat evenimentul

Efecte și animație

$('#box').show()

Afișează un element ascuns

$('#box').hide()

Ascunde un element

$('#box').toggle()

Comută vizibilitatea

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

Aduce un element în vizibilitate prin fade

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

Estompează un element prin fade

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

Fade până la o opacitate dată

$('#box').slideUp()

Alunecă un element în sus (restrânge)

$('#box').slideDown()

Alunecă un element în jos (extinde)

$('#box').slideToggle()

Comută o animație de alunecare

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

Animează proprietăți CSS

$('#box').stop()

Oprește animația curentă

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

Întârzie următorul efect din coadă

Parcurgere

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

Găsește descendenții care se potrivesc unui selector

$('#box').parent()

Obține părintele direct

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

Obține toți strămoșii care se potrivesc unui selector

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

Cel mai apropiat strămoș potrivit (sau el însuși)

$('#box').children()

Obține copiii direcți

$('#box').siblings()

Obține elementele sibling

$('#box').next()

Obține sibling-ul următor

$('#box').prev()

Obține sibling-ul anterior

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

Iterează peste fiecare element potrivit

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

Reduce setul după un selector

$('.item').first()

Reduce setul la primul element

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

Reduce setul la un singur index

AJAX

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

Cerere AJAX cu control complet

$.get('/api', fn)

Cerere HTTP GET prescurtată

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

Cerere HTTP POST prescurtată

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

Cerere GET care așteaptă JSON

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

Încarcă HTML într-un element

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

Setează tipul de răspuns așteptat

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

Trimite parametri de cerere

.done(function (res) {})

Rulează un callback la succes

.fail(function (err) {})

Rulează un callback la eșec

.always(function () {})

Rulează un callback după finalizare

$.ajaxSetup({headers: {}})

Setează valori implicite pentru toate cererile

Formulare

$('#form').serialize()

Codifică datele formularului ca șir de interogare

$('#form').serializeArray()

Codifică datele formularului ca array

$('#name').val()

Citește valoarea unui câmp

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

Scrie valoarea unui câmp

$(':input')

Selectează toate elementele de input ale formularului

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

Testează dacă un checkbox e bifat

$('#sel option:selected')

Obține opțiunea selectată

$('#in').focus()

Mută focalizarea pe un câmp

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

Tratează evenimentul de submit al formularului

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

Dezactivează un control de formular

Utilitare

$.each(arr, fn)

Iterează peste un array sau obiect

$.map(arr, fn)

Construiește un array nou din fiecare element

$.grep(arr, fn)

Filtrează un array după un predicat

$.extend({}, a, b)

Combină obiecte într-o țintă

$.trim(' hi ')

Elimină spațiile albe de la început/sfârșit

$.inArray(2, arr)

Găsește indexul unui element într-un array

$.isArray(x)

Testează dacă o valoare e un array

$.isFunction(x)

Testează dacă o valoare e o funcție

$.parseJSON(str)

Parsează un șir JSON într-un obiect

$.now()

Marcaj de timp curent în milisecunde

$.type(x)

Obține tipul intern al unei valori

Nicio intrare nu corespunde cu „:q”.

Ai nevoie de ajutor?

Ai întâmpinat o problemă cu acest instrument? Spune-ne.

Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.

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