Libreria JavaScript

Questo metodo ha diversi utilizzi:

Può ricevere un selettore CSS come parametro e restituire un oggetto JQ contenente gli elementi corrispondenti. Questo metodo è implementato tramite querySelectorAll.

$('.box')

Può ricevere elementi DOM, array qualsiasi, NodeList o oggetti JQ e restituire un oggetto JQ contenente gli elementi specificati.

$(document)

Può ricevere una stringa HTML e restituire un oggetto JQ contenente il DOM creato in base all'HTML.

$('<div id="wrapper">
  <span id="inner"></span>
</div>')

Può ricevere una funzione che verrà chiamata al termine del caricamento del DOM.

$(function () { console.log('DOM Loaded') })

Se viene passato un solo oggetto, le proprietà in tale oggetto verranno unite nell'oggetto JQ, equivalente all'aggiunta di nuove funzionalità nel namespace di JQ.

$.extend({
  customFunc: function () {}
})

// Quindi i metodi personalizzati possono essere chiamati così
$.customFunc()

Se vengono passati due o più oggetti, tutte le proprietà degli oggetti vengono aggiunte al primo oggetto e viene restituito l'oggetto unito.

var object = $.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// In questo caso, sia il primo oggetto che il valore restituito sono { key1: val1, key2: val2, key3: val3 }

Estensione dei metodi sulla catena prototipale di JQ.

$.fn.extend({
  customFunc: function () {}
})

// Quindi i metodi estesi possono essere utilizzati così
$(document).customFunc()

Serializza un oggetto o un array in una stringa che può essere utilizzata per i parametri URL.

$.param({ width: 1680, height: 1050 })
// width=1680&height=1050

$.param({ foo: { one: 1, two: 2 } })
// foo[one]=1&foo[two]=2

$.param({ ids: [1, 2, 3] })
// ids[]=1&ids[]=2&ids[]=3

Se il parametro passato è un array, il formato dell'array deve essere coerente con il formato restituito da .serializeArray():

$.param([
  { "name": "name", "value": "mdui" },
  { "name": "password", "value": "123456" }
])
// name=mdui&password=123456

Itera su array o oggetti. Il valore restituito è il primo parametro, ovvero l'array o l'oggetto iterato.

Il primo parametro della funzione è l'indice dell'array o la chiave dell'oggetto; il secondo parametro è il valore corrispondente alla posizione nell'array o nell'oggetto.

Il this nella funzione di callback punta al valore corrispondente alla posizione nell'array o nell'oggetto. Se la funzione di callback restituisce false, l'iterazione si interrompe.

// Itera su un array
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Risultato:
// 0:a
// 1:b
// 2:c

// Itera su un oggetto
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Risultato:
// name:mdui
// lang:zh

Aggiunge gli elementi del secondo array al primo array e restituisce l'array unito.

var first = ['a', 'b', 'c'];
var second = ['c', 'd', 'e'];
var result = $.merge(first, second);

console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

Filtra gli elementi duplicati nell'array.

var result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]

Itera su un array o un oggetto e restituisce un nuovo array composto dai valori restituiti dalla funzione.

Il primo parametro della funzione è il valore corrispondente alla posizione nell'array o nell'oggetto, il secondo parametro è l'indice dell'array o la chiave dell'oggetto.

La funzione può restituire qualsiasi valore. Se la funzione restituisce un array, verrà espanso; se restituisce null o undefined, verrà ignorato. All'interno della funzione, this punta all'oggetto window.

// Itera su un array
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Quando la funzione di callback restituisce un array, verrà espanso
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Itera su un oggetto
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Determina se il nodo genitore contiene il nodo figlio, restituisce un valore booleano.

$.contains(document, document.body); // true
$.contains(document.body, document); // false

Restituisce true se almeno un elemento nella collezione corrisponde al parametro, altrimenti restituisce false.

Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM, un oggetto JQ o una funzione di callback.

Quando il parametro è una funzione di callback, il primo parametro della funzione è l'indice, il secondo parametro è l'elemento corrente e this punta all'elemento corrente. Se la funzione restituisce true, indica una corrispondenza; se restituisce false, indica nessuna corrispondenza.

$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true

// Determinazione tramite il valore restituito della funzione di callback
$(document).is(function (index, element) {
  return element === document;
});
// true

Restituisce il numero di elementi nella collezione corrente.

$('body').length; // 1

Itera sulla collezione corrente ed esegue una funzione per ogni elemento della collezione. Se la funzione restituisce false, l'iterazione termina.

Il primo parametro della funzione è l'indice dell'elemento, il secondo parametro è l'elemento corrente. Il this nella funzione punta all'elemento corrente.

$('img').each(function(index, element) {
  this.src = 'test' + index + '.jpg';
});

Itera sulla collezione corrente, esegue una funzione per ogni elemento della collezione e restituisce una nuova collezione composta dai valori restituiti dalla funzione. Se la funzione restituisce null o undefined, verrà filtrata.

Il primo parametro della funzione è l'indice dell'elemento, il secondo parametro è l'elemento corrente. Il this della funzione punta all'elemento corrente.

var result = $('input.checked').map(function (index, element) {
  return $(this).val();
});

// result è un oggetto JQ composto dai valori degli elementi corrispondenti

Restituisce una collezione contenente solo l'elemento all'indice specificato.

$('div').eq(0); // Restituisce un oggetto JQ contenente solo il primo elemento
$('div').eq(-1); // Restituisce un oggetto JQ contenente solo l'ultimo elemento
$('div').eq(-2); // Restituisce un oggetto JQ contenente solo il penultimo elemento

Restituisce una collezione contenente solo il primo elemento.

$('div').first(); // Restituisce un oggetto JQ contenente solo il primo div

Restituisce una collezione contenente solo l'ultimo elemento.

$('div').last(); // Restituisce un oggetto JQ contenente solo l'ultimo div

Restituisce l'elemento all'indice specificato. Se non viene passato alcun parametro, viene restituito un array composto da tutti gli elementi nella collezione.

$('div').get(); // Restituisce un array composto da tutti gli elementi div
$('div').get(0); // Restituisce il primo elemento div
$('div').get(-1); // Restituisce l'ultimo elemento div

Se non viene passato alcun parametro, restituisce l'indice del primo elemento nella collezione rispetto ai suoi elementi fratelli.

Se viene passato un selettore CSS come parametro, restituisce l'indice del primo elemento nella collezione rispetto agli elementi corrispondenti al selettore CSS.

Se viene passato un elemento DOM, restituisce l'indice di tale elemento DOM nella collezione.

Se viene passato un oggetto JQ, restituisce l'indice del primo elemento nell'oggetto all'interno della collezione corrente.

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

$('#child3').index(); // 2
$('#child3').index('#child div'); // 2
$('#child div').index($('#child3').get(0)); // 2

Restituisce un sottoinsieme della collezione corrente.

Il primo parametro è la posizione iniziale del sottoinsieme, il secondo parametro è la posizione finale; se non viene passato il secondo parametro, indica che sono inclusi tutti gli elementi dalla posizione iniziale alla fine.

// Restituisce tutti gli elementi dopo il terzo elemento (incluso) nella collezione
$('div').slice(3);

// Restituisce gli elementi tra il terzo e il quinto elemento nella collezione (incluso il terzo, escluso il quinto)
$('div').slice(3, 5);

Filtra gli elementi dalla collezione corrente che corrispondono all'espressione specificata. Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM o una funzione di callback.

Quando il parametro è una funzione, il primo parametro della funzione è l'indice, il secondo parametro è l'elemento corrente e this nella funzione punta all'elemento corrente. Quando la funzione restituisce true, l'elemento corrente verrà mantenuto; quando restituisce false, l'elemento corrente verrà rimosso.

// Filtra tutti gli elementi div contenenti .box
$('div').filter('.box');

// Filtra tutte le opzioni selezionate
$('#select option').filter(function (index, element) {
  return element.selected;
});

Filtra gli elementi dalla collezione corrente che non corrispondono all'espressione specificata. Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM o una funzione di callback.

Quando il parametro è una funzione, il primo parametro della funzione è l'indice, il secondo parametro è l'elemento corrente e this nella funzione punta all'elemento corrente. Quando la funzione restituisce true, l'elemento corrente verrà rimosso; quando restituisce false, l'elemento corrente verrà mantenuto.

// Filtra tutti gli elementi div che non contengono la classe .box
$('div').not('.box');

// Filtra tutte le opzioni non selezionate
$('#select option').not(function (index, element) {
  return element.selected;
});

Determina se il primo elemento nella collezione contiene la classe CSS specificata.

// Determina se il primo elemento div contiene .item
$('div').hasClass('item')

Aggiunge una classe CSS a ciascun elemento nella collezione; più nomi di classe possono essere separati da spazi.

È anche possibile passare una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione è l'indice, il secondo parametro è il nome della classe CSS originale sull'elemento e this nella funzione punta all'elemento corrente.

// Aggiunge .item a tutti gli elementi div
$('div').addClass('item')

// Aggiunge .item1 e .item2 a tutti gli elementi div
$('div').addClass('item1 item2')

// Aggiunge a tutti gli elementi div la classe CSS restituita dalla funzione di callback
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Rimuove le classi CSS dagli elementi nella collezione; più nomi di classe possono essere separati da spazi.

È anche possibile passare una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione è l'indice, il secondo parametro è il nome della classe CSS originale sull'elemento e this nella funzione punta all'elemento corrente.

Se non viene passato alcun parametro, l'attributo class verrà rimosso direttamente dall'elemento.

// Rimuove .item da tutti gli elementi div
$('div').removeClass('item')

// Rimuove .item1 e .item2 da tutti gli elementi div
$('div').removeClass('item1 item2')

// Rimuove da tutti gli elementi div la classe CSS restituita dalla funzione di callback
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// Rimuove direttamente l'attributo class
$('div').removeClass()

Classe CSS sull'elemento: rimuove se presente, aggiunge se assente. Più nomi di classe possono essere separati da spazi.

È anche possibile passare una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione è l'indice, il secondo parametro è il nome della classe CSS originale sull'elemento e this nella funzione punta all'elemento corrente.

// Attiva/disattiva .item su tutti gli elementi div
$('div').toggleClass('item')

// Attiva/disattiva .item1 e .item2 su tutti gli elementi div
$('div').toggleClass('item1 item2')

// Attiva/disattiva la classe CSS restituita dalla funzione di callback su tutti gli elementi div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Ottiene il valore dell'attributo del primo elemento nella collezione.

// Ottiene il valore dell'attributo del primo elemento
$('input').prop('checked');

Può anche impostare i valori degli attributi di tutti gli elementi nella collezione.

Il valore dell'attributo impostato può essere il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore dell'attributo originale sull'elemento e this all'interno della funzione punta all'elemento corrente.

Se il valore dell'attributo o il valore restituito dalla funzione di callback è void o undefined, l'attributo originale non verrà modificato.

È anche possibile impostare più attributi contemporaneamente passando un oggetto.

// Imposta i valori degli attributi di tutti gli elementi selezionati
$('input').prop('checked', true);

// Imposta il valore dell'attributo tramite il valore restituito dalla funzione di callback
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Imposta contemporaneamente più valori di attributi dell'elemento
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Rimuove i valori degli attributi specificati da tutti gli elementi nella collezione.

$('input').removeProp('disabled');

Ottiene il valore della proprietà del primo elemento nella collezione.

// Ottiene il valore della proprietà del primo elemento
$('div').attr('username');

Può anche impostare i valori delle proprietà di tutti gli elementi nella collezione.

Il valore della proprietà impostato può essere il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore della proprietà originale sull'elemento e this all'interno della funzione punta all'elemento corrente.

Se il valore della proprietà o il valore restituito dalla funzione di callback è void o undefined, la proprietà originale non verrà modificata. Se il valore della proprietà o il valore restituito dalla funzione di callback è null, la proprietà specificata verrà rimossa.

È anche possibile impostare più proprietà contemporaneamente passando un oggetto.

// Imposta i valori delle proprietà di tutti gli elementi selezionati
$('div').attr('username', 'mdui');

// Imposta il valore della proprietà tramite il valore restituito dalla funzione di callback
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Imposta contemporaneamente più valori di proprietà dell'elemento
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Rimuove i valori delle proprietà specificati da tutti gli elementi nella collezione; più nomi di proprietà possono essere separati da spazi.

// Rimuove una proprietà da tutti gli elementi nella collezione
$('div').removeAttr('username');

// Rimuove più proprietà da tutti gli elementi nella collezione
$('div').removeAttr('username lastname');

Ottiene il valore del primo elemento nella collezione.

Se l'elemento è <select multiple="multiple">, verrà restituito un array contenente ogni opzione selezionata.

// Ottiene il valore del primo elemento selezionato
$('#input').val();

Può anche impostare il valore di tutti gli elementi nella collezione.

Il valore impostato può essere una stringa, un numero, un array di stringhe o una funzione di callback.

Se il valore è una funzione di callback, il primo parametro è l'indice dell'elemento, il secondo parametro è il valore originale dell'elemento e this nella funzione punta all'elemento corrente.

Se l'elemento è <input type="checkbox">, <input type="radio"> o <option>, il valore dell'elemento o il valore restituito dalla funzione può essere un array; in questo caso, verranno selezionati gli elementi il cui valore è presente nell'array e deselezionati quelli non presenti.

Se il valore o il valore restituito dalla funzione è undefined, il valore dell'elemento verrà impostato come vuoto.

// Imposta il valore dell'elemento selezionato
$('#input').val('input value');

// Imposta il valore dell'elemento tramite il valore restituito dalla funzione di callback
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Ottiene il contenuto testuale di tutti gli elementi nella collezione (inclusi i loro elementi discendenti)

// Ottiene il testo di tutti gli elementi .box
$('.box').text();

Può anche impostare il testo di tutti gli elementi nella collezione.

Il valore impostato può essere una stringa, un numero, un valore booleano o una funzione di callback.

Se è una funzione di callback, il primo parametro è l'indice dell'elemento, il secondo parametro è il contenuto testuale originale dell'elemento e this all'interno della funzione punta all'elemento corrente.

Se il valore impostato o il valore restituito dalla funzione di callback è undefined, il testo dell'elemento corrispondente non verrà modificato.

// Imposta il contenuto testuale degli elementi selezionati
$('.box').text('text content');

// Imposta il contenuto testuale degli elements tramite il valore restituito dalla funzione di callback
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Ottiene il contenuto HTML del primo elemento nella collezione.

// Ottiene il contenuto HTML del primo elemento .box
$('.box').html();

Può anche impostare il contenuto HTML di tutti gli elementi nella collezione.

Il valore impostato può essere una stringa HTML, un elemento DOM o una funzione di callback.

Se è una funzione di callback, il primo parametro è l'indice dell'elemento, il secondo parametro è il contenuto HTML originale dell'elemento e this all'interno della funzione punta all'elemento corrente.

Se il valore impostato o il valore restituito dalla funzione è undefined, l'HTML dell'elemento corrispondente non verrà modificato.

// Imposta l'HTML degli elementi selezionati
$('.box').html('<div>new html content</div>');

// Imposta il contenuto HTML degli elementi tramite il valore restituito dalla funzione di callback
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Legge o memorizza dati sull'elemento specificato.

Durante la memorizzazione dei dati, se il valore è undefined, equivale a leggere i dati corrispondenti sull'elemento. Ovvero, $.data(elemento, 'chiave', undefined) e $.data(elemento, 'chiave') sono equivalenti.

Nota: questo metodo non recupera gli attributi data-* sull'elemento.

// Memorizza i dati sull'elemento specificato, restituisce il valore memorizzato
$.data(document.body, 'layout', 'dark'); // Restituisce dark

// Memorizza contemporaneamente più dati sull'elemento specificato
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Ottiene i dati memorizzati sull'elemento specificato
$.data(document.body, 'layout'); // Restituisce dark

// Ottiene tutti i dati memorizzati sull'elemento specificato
$.data(document.body); // Restituisce { layout: 'dark', primary: 'indigo', accent: 'pink' }

Rimuove i dati memorizzati sull'elemento specificato.

Più nomi di chiave possono essere separati da spazi oppure è possibile utilizzare un array per indicare più nomi di chiave. Se non viene specificato alcun nome di chiave, verranno rimossi tutti i dati sull'elemento.

// Rimuove sull'elemento i dati con il nome chiave name
$.removeData(document.body, 'name');

// Rimuove sull'elemento i dati con i nomi chiave name1 e name2. I due metodi seguenti sono equivalenti:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Rimuove tutti i dati memorizzati sull'elemento
$.removeData(document.body);

Legge o memorizza dati sugli elementi della collezione corrente.

Durante la memorizzazione dei dati, se il valore è undefined, non verrà memorizzato.

Nota: i dati recuperati da questo metodo includeranno gli attributi data-* sull'elemento.

// Memorizza dati sugli elementi della collezione corrente
$('.box').data('layout', 'dark');

// Memorizza contemporaneamente più dati sugli elementi della collezione corrente
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Ottiene i dati specificati memorizzati sul primo elemento della collezione corrente
$('.box').data('layout'); // Restituisce dark

// Ottiene tutti i dati memorizzati sul primo elemento della collezione corrente
$('.box').data(); // Restituisce { layout: 'dark', primary: 'indigo', accent: 'pink' }

Rimuove i dati memorizzati sugli elementi della collezione corrente.

Più nomi di chiave possono essere separati da spazi oppure è possibile utilizzare un array per indicare più nomi di chiave. Se non viene specificato alcun nome di chiave, verranno rimossi tutti i dati sull'elemento.

Nota: questo metodo rimuoverà solo i dati impostati tramite il metodo .data(), non rimuoverà i dati degli attributi data-*.

// Rimuove i dati con il nome chiave name
$('.box').removeData('name');

// Rimuove i dati con i nomi chiave name1 e name2. I due metodi seguenti sono equivalenti:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Rimuove tutti i dati memorizzati sull'elemento
$('.box').removeData();

Ottiene il valore della proprietà CSS del primo elemento nella collezione.

$('.box').css('color')

Può anche impostare i valori delle proprietà CSS di tutti gli elementi nella collezione.

Il valore della proprietà può essere una stringa, un numero o una funzione di callback che restituisce una stringa o un numero.

Se il valore della proprietà è una funzione di callback, il primo parametro è l'indice dell'elemento, il secondo parametro è il valore della proprietà CSS originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore della proprietà o la funzione di callback restituisce void, undefined o null, il valore della proprietà CSS dell'elemento corrente non verrà modificato.

Se il valore della proprietà o la funzione di callback restituisce un valore numerico, verrà aggiunto px come unità. Se la proprietà non può utilizzare px come unità, il valore verrà convertito direttamente in stringa.

È anche possibile impostare più proprietà CSS contemporaneamente passando un oggetto coppia chiave-valore.

// Imposta i valori di stile di tutti gli elementi nella collezione
$('.box').css('color', 'red')

// Imposta i valori di stile di tutti gli elementi tramite il valore restituito dalla funzione di callback
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Imposta più stili contemporaneamente passando un oggetto
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Ottiene la larghezza (valore in pixel) del primo elemento nella collezione, esclusa la larghezza di padding, border e margin.

$('.box').width();

Può anche impostare la larghezza di tutti gli elementi nella collezione (esclusa la larghezza di padding, border e margin).

Il valore può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore della larghezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza dell'elemento non verrà modificata.

// Imposta la larghezza di tutti gli elementi nella collezione
$('.box').width('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').width(10);

// Imposta la larghezza tramite il valore restituito dalla funzione di callback
$('.box').width(function (index, oldWidth) {
  return 10;
});

Ottiene l'altezza (valore in pixel) del primo elemento nella collezione, esclusa l'altezza di padding, border e margin.

$('.box').height();

Può anche impostare l'altezza di tutti gli elementi nella collezione (esclusa l'altezza di padding, border e margin).

Il valore può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore dell'altezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza dell'elemento non verrà modificata.

// Imposta l'altezza di tutti gli elementi nella collezione
$('.box').height('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').height(10);

// Imposta l'altezza tramite il valore restituito dalla funzione di callback
$('.box').height(function (index, oldHeight) {
  return 10;
});

Ottiene la larghezza (valore in pixel) del primo elemento nella collezione, incluso padding, esclusa la larghezza di border e margin.

$('.box').innerWidth();

Può anche impostare la larghezza di tutti gli elementi nella collezione (incluso padding, esclusa la larghezza di border e margin).

Il valore può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore della larghezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza dell'elemento non verrà modificata.

// Imposta la larghezza di tutti gli elementi nella collezione
$('.box').innerWidth('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').innerWidth(10);

// Imposta la larghezza tramite il valore restituito dalla funzione di callback
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Ottiene l'altezza (valore in pixel) del primo elemento nella collezione, incluso padding, esclusa l'altezza di border e margin.

$('.box').innerHeight();

Può anche impostare l'altezza di tutti gli elementi nella collezione (incluso padding, esclusa l'altezza di border e margin).

Il valore può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è il valore dell'altezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza dell'elemento non verrà modificata.

// Imposta l'altezza di tutti gli elementi nella collezione
$('.box').innerHeight('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').innerHeight(10);

// Imposta l'altezza tramite il valore restituito dalla funzione di callback
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Ottiene la larghezza (valore in pixel) del primo elemento nella collezione, inclusa la larghezza di padding e border, esclusa la larghezza di margin; è possibile passare il parametro true affinché la larghezza includa la larghezza di margin.

// Include la larghezza di padding e border
$('.box').outerWidth();

// Include la larghezza di padding, border e margin
$('.box').outerWidth(true);

È anche possibile impostare la larghezza di tutti gli elementi nella collezione (inclusi padding e border, esclusa la larghezza di margin; è possibile passare true come secondo parametro affinché la larghezza includa la larghezza di margin).

Il primo parametro può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è la larghezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza dell'elemento non verrà modificata.

// Imposta la larghezza di tutti gli elementi nella collezione
$('.box').outerWidth('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').outerWidth(10);

// Se il secondo parametro è true, la larghezza includerà il margin
$('.box').outerWidth(10, true);

// Imposta la larghezza tramite il valore restituito dalla funzione di callback
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Ottiene l'altezza (valore in pixel) del primo elemento nella collezione, inclusa l'altezza di padding e border, esclusa l'altezza di margin; è possibile passare il parametro true affinché l'altezza includa l'altezza di margin.

// Include l'altezza di padding e border
$('.box').outerHeight();

// Include l'altezza di padding, border e margin
$('.box').outerHeight(true);

È anche possibile impostare l'altezza di tutti gli elementi nella collezione (inclusi padding e border, esclusa l'altezza di margin; è possibile passare true come secondo parametro affinché l'altezza includa l'altezza di margin).

Il primo parametro può essere una stringa con unità, un numero o una funzione di callback che restituisce una stringa con unità o un numero.

Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo parametro è l'altezza originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è un numero, verrà aggiunto automaticamente px come unità.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza dell'elemento non verrà modificata.

// Imposta l'altezza di tutti gli elementi nella collezione
$('.box').outerHeight('20%');

// Quando il valore è numerico, l'unità predefinita è px
$('.box').outerHeight(10);

// Se il secondo parametro è true, l'altezza includerà il margin
$('.box').outerHeight(10, true);

// Imposta l'altezza tramite il valore restituito dalla funzione di callback
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Nasconde tutti gli elementi nella collezione.

$('.box').hide();

Mostra tutti gli elementi nella collezione.

$('.box').show();

Attiva/disattiva lo stato di visualizzazione di tutti gli elementi nella collezione.

$('.box').toggle();

Ottiene le coordinate del primo elemento nella collezione rispetto a document.

$('.box').offset(); // { top: 20, left: 30 }

Può anche impostare le coordinate di tutti gli elementi nella collezione rispetto a document.

Il parametro è un oggetto contenente le proprietà top e left, oppure una funzione di callback che restituisce un oggetto in questo formato.

Se il parametro è una funzione di callback, il primo parametro è l'indice dell'elemento, il secondo parametro è la coordinata originale dell'elemento e this nella funzione punta all'elemento corrente.

Se il valore di top o left nel parametro è undefined, il valore corrispondente non verrà modificato.

// Imposta le coordinate di tutti gli elementi nella collezione
$('.box').offset({ top: 20, left: 30 });

// Imposta le coordinate dell'elemento tramite il valore restituito dalla funzione di callback
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Restituisce l'elemento genitore utilizzato per il posizionamento del primo elemento nella collezione. Ovvero, il primo elemento tra i genitori la cui position è relative o absolute.

$('.box').offsetParent();

Ottiene l'offset del primo elemento nella collezione rispetto al suo elemento genitore.

$('.box').position(); // { top: 20, left: 30 }

In tutti gli elementi della collezione corrente, trova la collezione di nodi discendenti specificati in base al selettore CSS.

// Trova tra i nodi discendenti di #box la collezione di nodi contenenti .box
$('#box').find('.box')

In tutti gli elementi della collezione corrente, ottiene la collezione composta dai figli diretti.

Può ricevere un selettore CSS come parametro per filtrare i figli.

// Trova tutti i figli diretti di #box
$('#box').children();

// Trova tra tutti i figli diretti di #box la collezione di elementi contenenti .box
$('#box').children('.box')

Tra tutti gli elementi della collezione corrente, filtra gli elementi che contengono i figli specificati.

Il parametro può essere un selettore CSS o un elemento DOM.

// Aggiunge un colore di sfondo ai li che contengono un ul
$('li').has('ul').css('background-color', 'red');

Ottiene la collezione dei genitori diretti di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro e restituire solo la collezione dei genitori corrispondenti a tale parametro.

// Restituisce il genitore diretto dell'elemento .box
$('.box').parent();

// Restituisce tra i genitori diretti dell'elemento .box quelli che contengono la classe .parent
$('.box').parent('.parent');

Ottiene la collezione degli elementi antenati di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro e restituire solo la collezione degli antenati corrispondenti a tale parametro.

// Restituisce tutti gli antenati dell'elemento span
$('span').parents();

// Restituisce tutti gli antenati dell'elemento span che sono elementi p
$('span').parents('p');

Ottiene tutti gli elementi genitori di ogni elemento nella collezione corrente, finché non viene incontrato un elemento corrispondente al primo parametro (l'elemento corrispondente è escluso).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ.

È possibile passare un secondo parametro, che deve essere un selettore CSS, indicando che vengono restituiti solo gli elementi corrispondenti a tale parametro.

Se non viene specificato alcun parametro, verranno trovati tutti gli antenati, ottenendo lo stesso effetto di .parents().

// Ottiene tutti gli antenati dell'elemento .item
$('.item').parentsUntil();

// Trova tutti gli elementi genitori dell'elemento .item finché non viene incontrato l'elemento .parent
$('.item').parentsUntil('.parent');

// Ottiene tutti gli antenati dell'elemento .item che sono elementi div, finché non viene incontrato l'elemento .parent
$('.item').parentsUntil('.parent', 'div');

Ottiene la collezione composta dall'elemento fratello precedente di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro per ottenere solo la collezione degli elementi fratelli corrispondenti a tale parametro.

// Ottiene la collezione dell'elemento precedente degli elementi .box
$('.box').prev();

// Ottiene la collezione del precedente elemento div degli elementi .box
$('.box').prev('div');

Ottiene la collezione composta da tutti gli elementi fratelli precedenti di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro per ottenere solo la collezione degli elementi fratelli corrispondenti a tale parametro.

// Ottiene tutti gli elementi fratelli precedenti degli elementi .box
$('.box').prevAll();

// Ottiene tutti gli elementi fratelli precedenti degli elementi .box che contengono .selected
$('.box').prevAll('.selected');

Ottiene tutti gli elementi fratelli precedenti di ogni elemento nella collezione corrente, finché non viene incontrato un elemento corrispondente al primo parametro (l'elemento corrispondente è escluso).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ.

È possibile passare un secondo parametro, che deve essere un selettore CSS, indicando che vengono restituiti solo gli elementi corrispondenti a tale parametro.

// Ottiene tutti gli elementi fratelli precedenti dell'elemento .box
$('.box').prevUntil();

// Ottiene tutti gli elementi fratelli precedenti dell'elemento .box finché non viene incontrato l'elemento .until
$('.box').prevUntil('.until');

// Ottiene gli elementi div fratelli precedenti dell'elemento .box finché non viene incontrato l'elemento .until
$('.box').prevUntil('.until', 'div');

Ottiene la collezione composta dall'elemento fratello successivo di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro per ottenere solo la collezione degli elementi fratelli corrispondenti a tale parametro.

// Ottiene la collezione dell'elemento successivo degli elementi .box
$('.box').next();

// Ottiene la collezione del successivo elemento div degli elementi .box
$('.box').next('div');

Ottiene la collezione composta da tutti gli elementi fratelli successivi di tutti gli elementi nella collezione corrente.

Può ricevere un selettore CSS come parametro per ottenere solo la collezione degli elementi fratelli corrispondenti a tale parametro.

// Ottiene tutti gli elementi fratelli successivi degli elementi .box
$('.box').nextAll();

// Ottiene tutti gli elementi fratelli successivi degli elementi .box che contengono .selected
$('.box').nextAll('.selected');

Ottiene tutti gli elementi fratelli successivi di ogni elemento nella collezione corrente, finché non viene incontrato un elemento corrispondente al primo parametro (l'elemento corrispondente è escluso).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ.

È possibile passare un secondo parametro, che deve essere un selettore CSS, indicando che vengono restituiti solo gli elementi corrispondenti a tale parametro.

// Ottiene tutti gli elementi fratelli successivi dell'elemento .box
$('.box').nextUntil();

// Ottiene tutti gli elementi fratelli successivi dell'elemento .box finché non viene incontrato l'elemento .until
$('.box').nextUntil('.until');

// Ottiene gli elementi div fratelli successivi dell'elemento .box finché non viene incontrato l'elemento .until
$('.box').nextUntil('.until', 'div');

Esegue una corrispondenza verso l'alto dall'elemento corrente e restituisce il primo elemento corrispondente trovato.

Il parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ.

// Ottiene l'elemento .parent più vicino tra i genitori dell'elemento .box
$('.box').closest('.parent');

Ottiene gli elementi fratelli di ogni elemento nella collezione corrente.

Può ricevere un selettore CSS come parametro per ottenere solo gli elementi fratelli corrispondenti a tale parametro.

// Ottiene tutti gli elementi fratelli dell'elemento .box
$('.box').siblings();

// Ottiene tra tutti gli elementi fratelli dell'elemento .box quelli che contengono .selected
$('.box').siblings('.selected');

Aggiunge elementi alla collezione corrente.

Il parametro può essere una stringa HTML, un selettore CSS, un oggetto JQ, un elemento DOM, un array di elementi DOM o una NodeList.

// Aggiunge gli elementi contenenti .selected alla collezione corrente
$('.box').add('.selected');

Rimuove tutti i figli dall'elemento corrente.

$('.box').empty();

Rimuove gli elementi nella collezione corrente dal DOM.

È possibile passare un selettore CSS come parametro per rimuovere solo gli elementi corrispondenti a tale parametro.

// Rimuove tutti gli elementi p
$('p').remove();

// Rimuove tutti gli elementi p contenenti .box
$('p').remove('.box');

Inserisce il contenuto specificato all'inizio dell'interno degli elementi della collezione corrente.

Il tipo di parametro può essere una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ. È supportato il passaggio di più parametri.

È anche possibile passare una funzione di callback che restituisce una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ; il primo parametro della funzione è l'indice dell'elemento corrente, il secondo parametro è l'HTML originale dell'elemento e this nella funzione punta all'elemento corrente.

Questo metodo restituisce la collezione originale.

// Inserisce un elemento
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Risultato:<p><b>Hello</b>I would like to say: </p>

// Inserisce più elementi
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Risultato:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Inserisce un elemento tramite una funzione di callback
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato:<p><b>Hello0</b>Hello</p>

Aggiunge gli elementi della collezione corrente all'inizio dell'interno dell'elemento specificato.

Il parametro può essere un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ.

Questo metodo restituisce la collezione originale.

$('<div>Hello</div>').prependTo('<div>I would like to say: </div>');

// Risultato:[ <div><div>Hello</div>I would like to say: </div> ]

Inserisce il contenuto specificato alla fine dell'interno degli elementi della collezione corrente.

Il tipo di parametro può essere una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ. È supportato il passaggio di più parametri.

È anche possibile passare una funzione di callback che restituisce una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ; il primo parametro della funzione è l'indice dell'elemento corrente, il secondo parametro è l'HTML originale dell'elemento e this nella funzione punta all'elemento corrente.

Questo metodo restituisce la collezione originale.

// Inserisce un elemento
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Risultato:<p>I would like to say: <b>Hello</b></p>

// Inserisce più elementi
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Risultato:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Inserisce un elemento tramite una funzione di callback
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato:<p>Hello<b>Hello0</b></p>

Aggiunge gli elementi della collezione corrente alla fine dell'interno dell'elemento specificato.

Il parametro può essere un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ.

Questo metodo restituisce la collezione originale.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// Risultato:<div>I would like to say: <div>Hello</div></div>

Inserisce il contenuto specificato dopo l'elemento nella collezione corrente, come suo fratello.

Il tipo di parametro può essere una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ. È supportato il passaggio di più parametri.

È anche possibile passare una funzione di callback che restituisce una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ; il primo parametro della funzione è l'indice dell'elemento corrente, il secondo parametro è l'HTML originale dell'elemento e this nella funzione punta all'elemento corrente.

Questo metodo restituisce la collezione originale.

// Inserisce un elemento
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Risultato:<p>I would like to say: </p><b>Hello</b>

// Inserisce più elementi
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Risultato:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Inserisce un elemento tramite una funzione di callback
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato:<p>Hello</p><b>Hello0</b>

Inserisce gli elementi della collezione corrente dopo l'elemento di destinazione, come suoi fratelli.

Se gli elementi nella collezione corrente sono già presenti nella pagina, verranno spostati anziché copiati. Se sono presenti più destinazioni, gli elementi nella collezione corrente verranno clonati e aggiunti dopo ogni elemento di destinazione.

È possibile passare una stringa HTML, un selettore CSS, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametro per specificare l'elemento di destinazione.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// Risultato:<p>I would like to say: </p><b>Hello</b>

Inserisce il contenuto specificato prima dell'elemento nella collezione corrente, come suo fratello.

Il tipo di parametro può essere una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ. È supportato il passaggio di più parametri.

È anche possibile passare una funzione di callback che restituisce una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ; il primo parametro della funzione è l'indice dell'elemento corrente, il secondo parametro è l'HTML originale dell'elemento e this nella funzione punta all'elemento corrente.

Questo metodo restituisce la collezione originale.

// Inserisce un elemento
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Risultato:<b>Hello</b><p>I would like to say: </p>

// Inserisce più elementi
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Risultato:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Inserisce un elemento tramite una funzione di callback
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato:<b>Hello0</b><p>Hello</p>

Inserisce gli elementi della collezione corrente prima dell'elemento di destinazione, come suoi fratelli.

Se gli elementi nella collezione corrente sono già presenti nella pagina, verranno spostati anziché copiati. Se sono presenti più destinazioni, gli elementi nella collezione corrente verranno clonati e aggiunti dopo ogni elemento di destinazione.

È possibile passare una stringa HTML, un selettore CSS, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametro per specificare l'elemento di destinazione.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// Risultato:<p>I would like to say: </p><b>Hello</b>

Sostituisce gli elementi nella collezione corrente con gli elementi specificati.

Il parametro può essere una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ.

È anche possibile passare una funzione di callback che restituisce una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ; il primo parametro della funzione è l'indice dell'elemento corrente, il secondo parametro è l'HTML originale dell'elemento e this nella funzione punta all'elemento corrente.

Questo metodo restituisce la collezione originale, ovvero la collezione che è stata sostituita.

// Sostituisce tutti gli elementi .box con <p>Hello</p>
$('.box').replaceWith('<p>Hello</p>');

// Sostituisce tutti gli elementi .box con il valore restituito dalla funzione di callback
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Sostituisce gli elementi specificati con gli elementi della collezione corrente.

Il parametro è un selettore CSS, un elemento DOM, un array di elementi DOM o un oggetto JQ.

Questo metodo restituisce la collezione originale, ovvero la collezione di elementi utilizzati per la sostituzione.

// ${$t().a379}
$('.new').replaceAll('.box');

Copia tutti gli elementi nella collezione tramite clonazione profonda.

Copia tutti gli elementi nella collezione tramite clonazione profonda utilizzando il metodo nativo cloneNode. Questo metodo non copia i dati e i gestori di eventi nei nuovi elementi. Questo è diverso da jQuery, dove jQuery decide se copiare dati e gestori di eventi tramite parametri.

$('body').append($("#box").clone())

Combina i valori degli elementi del modulo in un array composto da coppie chiave-valore di name e value.

Questo metodo può operare su singoli elementi del modulo o sull'intero modulo <form>

$('form').serializeArray();
// [
//   { "name": "golang", "value":"456" },
//   { "name": "name", "value": "mdui" },
//   { "name": "password", "value": "" }
// ]

Serializza i valori degli elementi del modulo.

$('form').serialize();
// golang=456&name=mdui&password=

Associa una funzione di gestione degli eventi a un evento specifico per ciascun elemento nella collezione. Vedere gli esempi seguenti per l'utilizzo dettagliato:

// Associa l'evento click
$('.box').on('click', function (e) {
  console.log('Cliccato sull'elemento .box');
});

// Associa più eventi
$('.box').on('click focus', function (e) {
  console.log('Gli eventi click e focus attiveranno entrambi questa funzione');
});

// Delegazione degli eventi
$(document).on('click', '.box', function (e) {
  console.log('Questa funzione verrà attivata quando si clicca su .box');
});

// Associa contemporaneamente più eventi e funzioni di gestione degli eventi
$('.box').on({
  'click': function (e) {
    console.log('Attivato l'evento click');
  },
  'focus': function (e) {
    console.log('Attivato l'evento focus');
  }
});

// Passaggio di parametri
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Cliccato sull'elemento .box e passati parametri alla funzione di gestione degli eventi');
  // e._data è {key1: 'value1', key2: 'value2'}
});

// Associa contemporaneamente più eventi e funzioni di gestione degli eventi e passa parametri
$('.box').on({
  'click': function (e) {
    console.log('Attivato l'evento click');
    // e._data è {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Attivato l'evento focus');
    // e._data è {key1: 'value1', key2: 'value2'}
  }
}, { key1: 'value1', key2: 'value2' });

// Associa eventi tramite delegazione e passa parametri
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Cliccato sull'elemento .box e passati parametri alla funzione di gestione degli eventi');
  // e._data è {key1: 'value1', key2: 'value2'}
});

// Associa contemporaneamente più eventi e funzioni di gestione degli eventi tramite delegazione
$(document).on({
  'click': function (e) {
    console.log('Attivato l'evento click');
  },
  'focus': function (e) {
    console.log('Attivato l'evento focus');
  }
}, '.box');

// Associa contemporaneamente più eventi e funzioni di gestione degli eventi tramite delegazione e passa parametri
$(document).on({
  'click': function (e) {
    console.log('Attivato l'evento click');
    // e._data è {key1: 'value1', key2: 'value2'}
  },
  'focus': function (e) {
    console.log('Attivato l'evento focus');
    // e._data è {key1: 'value1', key2: 'value2'}
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Ottiene i parametri dell'evento
$('.box').on('click', function (e, data) {
  // data è uguale a e._detail
});

// I nomi degli eventi supportano l'uso dei namespace
$('.box').on('click.myPlugin', function () {
  console.log('Cliccato sull'elemento .box');
});

Associa una funzione di gestione degli eventi a un evento specifico per ciascun elemento corrispondente. Ma l'evento verrà attivato solo una volta.

L'utilizzo di questo metodo è lo stesso di .on(), quindi non verranno forniti ulteriori esempi.

Rimuove l'associazione degli eventi per ciascun elemento nella collezione. Vedere gli esempi seguenti per l'utilizzo dettagliato:

// Rimuove tutte le funzioni di gestione degli eventi associate
$('.box').off();

// Rimuove l'associazione dell'evento specificato
$('.box').off('click');

// Rimuove contemporaneamente l'associazione di più eventi
$('.box').off('click focus');

// Rimuove l'associazione della funzione di gestione degli eventi specificata
$('.box').off('click', callback);

// Rimuove gli eventi associati tramite delegazione
$(document).off('click', '.box');

// Rimuove la funzione di gestione degli eventi specificata associata tramite delegazione
$(document).off('click', '.box', callback);

// Rimuove contemporaneamente l'associazione di più funzioni di gestione degli eventi
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Rimuove contemporaneamente l'associazione di più funzioni di gestione degli eventi associate tramite delegazione
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// I nomi degli eventi supportano l'uso dei namespace; l'utilizzo seguente rimuoverà tutti gli eventi che terminano con .myPlugin
$(document).off('.myPlugin');

Attiva l'evento specificato. Vedere gli esempi seguenti per l'utilizzo dettagliato:

// Attiva l'evento specificato
$('.box').trigger('click');

// Passa parametri durante l'attivazione dell'evento
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Imposta i parametri di configurazione globale per le richieste Ajax.

$.ajaxSetup({
  // Disabilita per impostazione predefinita l'attivazione degli eventi AJAX globali
  global: false,

  // Usa POST per impostazione predefinita per le richieste
  method: 'POST'
});

Vedere l'elenco dettagliato dei parametri nei parametri AJAX di seguito.

Invia una richiesta AJAX e restituisce una Promise.

$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});

Vedere l'elenco dettagliato dei parametri nei parametri AJAX di seguito.

Eventi AJAX globali.

Esegue la funzione all'inizio della richiesta AJAX.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri di configurazione della richiesta AJAX
});

Eventi AJAX globali.

Esegue la funzione quando la richiesta AJAX ha successo.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri di configurazione della richiesta AJAX
  // data: dati restituiti dalla richiesta AJAX
});

Eventi AJAX globali.

Esegue la funzione quando si verifica un errore nella richiesta AJAX.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri di configurazione della richiesta AJAX
});

Eventi AJAX globali.

Esegue la funzione al termine della richiesta AJAX.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri di configurazione della richiesta AJAX
});

Metodo della richiesta.

Include: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Dati aggiunti agli Headers. Questo valore può essere riscritto nella funzione di callback beforeSend.

I campi con valore stringa o null verranno inviati, i campi con valore undefined verranno rimossi.

Dati impostati sull'oggetto XMLHttpRequest.

$.ajax({
  url: 'Un URL cross-domain',
  xhrFields: {
    withCredentials: true
  }
});

Oggetto composto da codici di stato HTTP e funzioni.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Chiamato quando il codice di stato restituito è 404');
    },
    200: function (data, textStatus, xhr) {
      alert('Chiamato quando il codice di stato restituito è 200');
    }
  }
});

Se il codice di stato è tra 200 e 299, o se il codice di stato è 304, indica che la richiesta ha avuto successo; i parametri della funzione sono gli stessi della callback success. Altrimenti, indica che la richiesta è fallita e i parametri della funzione sono gli stessi della callback error.

Tipo di dati restituiti dal server.

Include: text, json

Chiamato prima dell'invio della richiesta. Se restituisce false, la richiesta AJAX verrà annullata.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: oggetto XMLHttpRequest
  }
});

Chiamato dopo il successo della richiesta.

$.ajax({
  success: function (data, textStatus, xhr) {
    // data: dati restituiti dalla richiesta AJAX
    // textStatus: stringa contenente il codice di successo
    // xhr: oggetto XMLHttpRequest
  }
});

Chiamato quando si verifica un errore nella richiesta.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: oggetto XMLHttpRequest
    // textStatus: stringa contenente il codice di successo
  }
});

Chiamato dopo il completamento della richiesta.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: oggetto XMLHttpRequest
    // textStatus: stringa contenente il codice di successo
  }
});

Forza il ridisegno dell'elemento corrente.

$('.box').reflow();

Imposta la proprietà transition-duration dell'elemento corrente.

Può essere un valore di tempo con unità o senza unità. Se non ha unità, verrà aggiunto automaticamente ms come unità.

$('.box').transition(100);

Aggiunge una callback per l'evento transitionend sull'elemento corrente.

Il parametro della funzione di callback è l'oggetto evento transitionend e this nella funzione punta all'elemento corrente.

$('.box').transitionEnd(function () {
  console.log('L'evento transitionend dell'elemento .box è stato attivato');
})

Imposta la proprietà transform dell'elemento corrente.

$('.box').transform('rotate(90deg)')

Imposta la proprietà transform-origin dell'elemento corrente.

$('.box').transformOrigin('top center')

Esegue le funzioni di inizializzazione registrate all'interno dell'elemento corrente e dei suoi figli.

$('[mdui-collapse]').mutation()

Crea e mostra un overlay, restituendo l'oggetto JQ del livello overlay.

Può ricevere un parametro intero che rappresenta lo stile z-index dell'overlay, il valore predefinito è 2000.

$.showOverlay();

Nasconde lo strato overlay.

Se $.showOverlay() viene chiamato più volte per mostrare l'overlay, è necessario chiamare $.hideOverlay() lo stesso numero di volte per nasconderlo. È possibile forzare la chiusura dell'overlay passando il parametro true.

$.hideOverlay();

Blocca la pagina, impedendo lo scorrimento.

$.lockScreen();

Sblocca la pagina.

Se $.lockScreen() viene chiamato più volte per bloccare la pagina, è necessario chiamare $.unlockScreen() lo stesso numero di volte per sbloccarla. È possibile forzare lo sblocco della pagina passando il parametro true.

$.unlockScreen();

Throttling della funzione.

Riceve una funzione come parametro: il primo parametro è la funzione da eseguire, il secondo parametro è il tempo di ritardo in millisecondi.

$.throttle(function () {
  console.log('Questa funzione viene eseguita al massimo una volta ogni 100 ms');
}, 100)

Genera un ID univoco globale.

$.guid();

Può ricevere un parametro. Se il guid corrispondente a tale valore non esiste, verrà generato e restituito un nuovo guid; se esiste già, verrà restituito il guid esistente.

// Le seguenti due righe di codice restituiscono lo stesso valore
$.guid('test');
$.guid('test');