Scheda di riferimento jQuery
Un riferimento jQuery stampabile e ricercabile — selettori, manipolazione del DOM, eventi, effetti, attraversamento, AJAX e helper per i moduli. Gratis.
Selettori
14$('#id')
Seleziona un elemento per il suo id
$('.class')
Seleziona tutti gli elementi con una classe
$('div')
Seleziona tutti gli elementi di un tag
$('*')
Seleziona ogni elemento nella pagina
$('[name="email"]')
Seleziona per valore di attributo
$('a[href^="https"]')
Selettore attributo che inizia con
$('ul li:first')
Primo elemento corrispondente
$('ul li:last')
Ultimo elemento corrispondente
$('tr:eq(2)')
Elemento a un indice base zero
$('li:not(.done)')
Esclude gli elementi che corrispondono a un selettore
$(':checked')
Tutte le checkbox/radio selezionate
$('div:visible')
Solo gli elementi attualmente visibili
$('ul li')
Combinatore discendente
$('ul > li')
Combinatore figlio diretto
Document ready e DOM
10$(function () { /* ... */ });
Esegue codice quando il DOM è pronto
$(document).ready(fn)
Handler document-ready esplicito
$(window).on('load', fn)
Esegue dopo il caricamento di tutti gli asset
$(this)
Avvolge l'elemento del contesto corrente
$(el)
Avvolge un nodo DOM grezzo in jQuery
$('<div class="box"></div>')
Crea un nuovo elemento da HTML
$('#box')[0]
Ottiene il nodo DOM sottostante
$('#box').get(0)
Ottiene il nodo DOM tramite .get()
$('.item').length
Conta gli elementi corrispondenti
$('#box').is(':visible')
Verifica un selettore sull'insieme
Manipolazione del DOM
12$('#box').html('<b>Hi</b>')
Imposta l'HTML interno
$('#box').text('Hello')
Imposta il contenuto testuale (con escape)
$('#name').val('Ada')
Imposta il valore di un campo del form
$('#list').append('<li>x</li>')
Inserisce contenuto alla fine
$('#list').prepend('<li>x</li>')
Inserisce contenuto all'inizio
$('#box').before('<hr>')
Inserisce contenuto prima dell'elemento
$('#box').after('<hr>')
Inserisce contenuto dopo l'elemento
$('#box').remove()
Rimuove l'elemento dal DOM
$('#box').empty()
Rimuove tutti i nodi figli
$('#box').clone()
Crea una copia dell'elemento
$('#box').wrap('<div>')
Avvolge l'elemento in nuovo HTML
$('#box').replaceWith('<p>')
Sostituisce interamente l'elemento
Attributi e CSS
13$('#img').attr('src')
Ottiene il valore di un attributo
$('#img').attr('alt', 'Logo')
Imposta il valore di un attributo
$('#cb').prop('checked')
Ottiene una proprietà DOM (checked/disabled)
$('#cb').prop('checked', true)
Imposta una proprietà DOM
$('#img').removeAttr('title')
Rimuove un attributo
$('.box').addClass('active')
Aggiunge una classe CSS
$('.box').removeClass('active')
Rimuove una classe CSS
$('.box').toggleClass('open')
Attiva/disattiva una classe CSS
$('.box').hasClass('active')
Verifica se una classe è presente
$('#box').css('color', 'red')
Imposta una singola proprietà CSS
$('#box').css({top: 0, left: 0})
Imposta più proprietà CSS
$('#box').width()
Ottiene la larghezza calcolata in pixel
$('#box').height()
Ottiene l'altezza calcolata in pixel
Eventi
12$('#btn').on('click', fn)
Collega un gestore di eventi
$('#btn').off('click')
Scollega i gestori di eventi
$('#btn').click(fn)
Gestore di click abbreviato
$('#form').submit(fn)
Gestisce l'invio del form
$('#sel').change(fn)
Gestisce le modifiche di valore
$('#in').keyup(fn)
Gestisce il key-up in un campo
$('#list').on('click', '.item', fn)
Evento delegato per figli dinamici
$('#btn').trigger('click')
Attiva un evento programmaticamente
$('#btn').one('click', fn)
Esegue un gestore al massimo una volta
e.preventDefault()
Ferma l'azione predefinita del browser
e.stopPropagation()
Impedisce la propagazione dell'evento
e.target
L'elemento che ha attivato l'evento
Effetti e animazioni
12$('#box').show()
Mostra un elemento nascosto
$('#box').hide()
Nasconde un elemento
$('#box').toggle()
Attiva/disattiva la visibilità
$('#box').fadeIn(300)
Fa apparire un elemento in dissolvenza
$('#box').fadeOut(300)
Fa scomparire un elemento in dissolvenza
$('#box').fadeTo(300, 0.5)
Dissolvenza fino a un'opacità data
$('#box').slideUp()
Fa scorrere un elemento verso l'alto (collassa)
$('#box').slideDown()
Fa scorrere un elemento verso il basso (espande)
$('#box').slideToggle()
Attiva/disattiva un'animazione di scorrimento
$('#box').animate({left: 100})
Anima le proprietà CSS
$('#box').stop()
Ferma l'animazione corrente
$('#box').delay(500).fadeIn()
Ritarda il prossimo effetto in coda
Attraversamento
12$('#box').find('.item')
Trova i discendenti che corrispondono a un selettore
$('#box').parent()
Ottiene il genitore diretto
$('#box').parents('.row')
Ottiene tutti gli antenati che corrispondono a un selettore
$('#box').closest('.row')
Antenato corrispondente più vicino (o se stesso)
$('#box').children()
Ottiene i figli diretti
$('#box').siblings()
Ottiene gli elementi fratelli
$('#box').next()
Ottiene il fratello successivo
$('#box').prev()
Ottiene il fratello precedente
$('.item').each(fn)
Itera su ogni elemento corrispondente
$('.item').filter('.on')
Riduce l'insieme con un selettore
$('.item').first()
Riduce l'insieme al primo elemento
$('.item').eq(1)
Riduce l'insieme a un singolo indice
AJAX
11$.ajax({url: '/api', method: 'GET'})
Richiesta AJAX a controllo completo
$.get('/api', fn)
Richiesta HTTP GET abbreviata
$.post('/api', data, fn)
Richiesta HTTP POST abbreviata
$.getJSON('/api.json', fn)
Richiesta GET che si aspetta JSON
$('#box').load('/part.html')
Carica HTML in un elemento
$.ajax({dataType: 'json'})
Imposta il tipo di risposta atteso
$.ajax({data: {q: 'x'}})
Invia i parametri della richiesta
.done(function (res) {})
Esegue una callback in caso di successo
.fail(function (err) {})
Esegue una callback in caso di errore
.always(function () {})
Esegue una callback al completamento
$.ajaxSetup({headers: {}})
Imposta i default per tutte le richieste
Form
10$('#form').serialize()
Codifica i dati del form come query string
$('#form').serializeArray()
Codifica i dati del form come array
$('#name').val()
Legge il valore di un campo
$('#name').val('Ada')
Scrive il valore di un campo
$(':input')
Seleziona tutti gli input del form
$('#cb').is(':checked')
Verifica se una checkbox è selezionata
$('#sel option:selected')
Ottiene l'opzione selezionata
$('#in').focus()
Sposta il focus su un campo
$('#form').on('submit', fn)
Gestisce l'evento di invio del form
$('#in').prop('disabled', true)
Disabilita un controllo del form
Utility
11$.each(arr, fn)
Itera su un array o un oggetto
$.map(arr, fn)
Costruisce un nuovo array da ogni elemento
$.grep(arr, fn)
Filtra un array con un predicato
$.extend({}, a, b)
Unisce oggetti in un target
$.trim(' hi ')
Rimuove gli spazi iniziali/finali
$.inArray(2, arr)
Trova l'indice di un elemento in un array
$.isArray(x)
Verifica se un valore è un array
$.isFunction(x)
Verifica se un valore è una funzione
$.parseJSON(str)
Analizza una stringa JSON in un oggetto
$.now()
Timestamp corrente in millisecondi
$.type(x)
Ottiene il tipo interno di un valore
Nessuna voce corrisponde a “:q”.
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.