Libreria jq

mdui include una libreria di utilità JavaScript leggera che fornisce un'API simile a jQuery con chiamate concatenabili con una frazione delle dimensioni di jQuery.

Importa la funzione:

import { $ } from 'mdui/jq.js';

Core

`$()`

Questa funzione ha diversi utilizzi:

Passa un selettore CSS per ottenere un oggetto JQ contenente gli elementi corrispondenti.

$('.box');

Passa un elemento DOM, un array, una NodeList o un oggetto JQ per ottenere un oggetto JQ contenente gli elementi specificati.

$(document);

Passa una stringa HTML per creare un oggetto JQ contenente gli elementi DOM creati dall'HTML.

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

Passa una funzione da chiamare quando il DOM è completamente caricato.

$(function () {
  console.log('DOM Caricato');
});

Estensione

`$.extend()`

Passare un singolo oggetto unisce le sue Proprietà nell'oggetto $, aggiungendo effettivamente nuove funzionalità allo spazio dei nomi $.

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

// Ora puoi chiamare il metodo personalizzato in questo modo
$.customFunc();

Passare due o più oggetti unisce tutte le proprietà di ciascun oggetto nel primo. L'oggetto unito viene restituito. Nota che le proprietà con un valore undefined non vengono unite.

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

// Sia il primo oggetto che il valore restituito sono ora { key1: val1, key2: val2, key3: val3 }

`$.fn.extend()`

Questo metodo estende la catena di prototipi di $, aggiungendo nuovi metodi.

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

// Ora puoi usare il metodo esteso in questo modo
$(document).customFunc();

URL

`$.param()`

Questo metodo serializza un array o un oggetto in una stringa che può essere utilizzata come stringa di query URL.

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

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

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

Se il parametro passato è un array, dovrebbe essere nel formato restituito dal metodo .serializeArray().

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

Operazioni su Array e Oggetti

`$.each()`

Questo metodo itera su un array o un oggetto. Restituisce il primo parametro, che è l'array o l'oggetto da attraversare.

Il primo parametro della funzione di callback è l'indice per gli array o la chiave per gli oggetti. Il secondo parametro è il valore nella posizione corrispondente.

La parola chiave this nella funzione di callback si riferisce al valore corrente. 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

`$.merge()`

Questo metodo aggiunge gli elementi del secondo array al primo array e restituisce l'array unito.

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

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

`$.unique()`

Questo metodo rimuove gli elementi duplicati da un array.

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

`$.map()`

Questo metodo itera su un array o un oggetto, applicando una funzione a ciascun elemento, e restituisce un nuovo array composto dai valori restituiti dalla funzione.

Il primo parametro della funzione di callback è il valore dell'elemento corrente, e il secondo parametro è l'indice per gli array o la chiave per gli oggetti.

La funzione di callback può restituire qualsiasi valore. Se restituisce un array, l'array verrà appiattito. Se restituisce null o undefined, il valore verrà ignorato. La parola chiave this all'interno della funzione si riferisce all'oggetto window globale.

// Itera su un array
const 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, questo verrà appiattito
const 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
const result = $.map(
  { name: 'mdui', password: '123456' },
  function (value, key) {
    return key + ':' + value;
  },
);
console.log(result); // ['name:mdui', 'password:123456']

`$.contains()`

Questo metodo controlla se un nodo padre contiene un nodo figlio, restituendo un valore booleano.

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

Controllo del Tipo di Dati

`.is()`

Questo metodo controlla se almeno un elemento nella collezione corrisponde al parametro specificato. Restituisce un valore booleano.

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

Quando il parametro è una funzione, prende l'indice e l'elemento corrente come argomenti. this si riferisce all'elemento corrente. La funzione dovrebbe restituire true se l'elemento corrisponde, altrimenti false.

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

// Utilizzo di una funzione per il confronto
$(document).is(function (index, element) {
  return element === document;
});
// true

Accesso agli Oggetti

`.length`

Questa Proprietà restituisce il numero di elementi nella collezione corrente.

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

`.each()`

Questo metodo itera sulla collezione corrente, eseguendo una funzione per ogni elemento. L'iterazione si interrompe se la funzione restituisce false.

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

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

`.map()`

Questo metodo itera sulla collezione corrente, eseguendo una funzione per ogni elemento. Restituisce una nuova collezione composta dai valori restituiti dalla funzione.

La funzione può restituire un singolo valore o un array. Se restituisce un array, gli elementi vengono aggiunti alla nuova collezione. I valori null o undefined vengono ignorati.

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

const result = $('input.checked').map(function (i, element) {
  return element.value;
});

// result è un oggetto JQ di valori dagli elementi corrispondenti

`.eq()`

Questo metodo restituisce una collezione contenente solo l'elemento all'indice specificato.

$('div').eq(0); // Restituisce una collezione con il primo div
$('div').eq(-1); // Restituisce una collezione con l'ultimo div
$('div').eq(-2); // Restituisce una collezione con il penultimo div

`.first()`

Questo metodo restituisce una collezione contenente solo il primo elemento della collezione corrente.

$('div').first(); // Restituisce una collezione con il primo div

`.last()`

Questo metodo restituisce una collezione contenente solo l'ultimo elemento della collezione corrente.

$('div').last(); // Restituisce una collezione con l'ultimo div

`.get()`

Questo metodo restituisce l'elemento all'indice specificato. Se non viene passato alcun parametro, restituisce un array di tutti gli elementi nella collezione.

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

`.index()`

Questo metodo restituisce l'indice del primo elemento nella collezione corrente rispetto ai suoi elementi fratelli se non viene passato alcun parametro.

Se viene passato un selettore CSS come parametro, restituisce l'indice rispetto agli elementi corrispondenti al selettore.

Se viene passato un elemento DOM o un oggetto JQ come parametro, restituisce l'indice di quell'elemento 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

`.slice()`

Questo metodo restituisce un sottoinsieme della collezione corrente.

Il primo parametro è la posizione di partenza, e il secondo è la posizione finale (esclusa). Se il secondo parametro viene omesso, il metodo include tutti gli elementi dalla posizione di partenza fino alla fine della collezione.

$('div').slice(3); // Restituisce tutti gli elementi dalla terza posizione in poi
$('div').slice(3, 5); // Restituisce gli elementi dalla terza alla quinta posizione (esclusa la quinta)

`.filter()`

Questo metodo filtra la collezione corrente in base ai criteri specificati.

Il parametro può essere un selettore CSS, un elemento DOM, un array di elementi DOM o una funzione di callback che restituisce un booleano.

Quando il parametro è un callback, prende l'indice dell'elemento e l'elemento corrente come argomenti. this si riferisce all'elemento corrente. Se la funzione restituisce true, l'elemento è incluso nel risultato; se false, viene escluso.

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

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

`.not()`

Questo metodo esclude dalla collezione corrente gli elementi che corrispondono ai criteri specificati.

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

Quando il parametro è un callback, il primo parametro della funzione è l'indice dell'elemento, il secondo è l'elemento corrente, e this si riferisce all'elemento corrente. Se la funzione restituisce true, l'elemento viene escluso; se false, viene incluso.

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

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

Classi CSS

`.hasClass()`

Questo metodo controlla se il primo elemento nella collezione ha la classe CSS specificata.

// Restituisce true se il primo div ha la classe .item
$('div').hasClass('item');

`.addClass()`

Questo metodo aggiunge classi CSS a ciascun elemento nella collezione. Puoi aggiungere più nomi di classe separandoli con spazi.

Il parametro può essere una stringa o una funzione di callback che restituisce un nome di classe CSS. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il nome della classe CSS esistente, e this si riferisce 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 le classi CSS restituite dalla funzione di callback a tutti gli elementi div
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

`.removeClass()`

Questo metodo rimuove le classi CSS specificate da ciascun elemento nella collezione. Puoi rimuovere più nomi di classe separandoli con spazi.

Se non viene passato alcun parametro, rimuoverà l'attributo class dagli elementi.

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

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

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

`.toggleClass()`

Questo metodo attiva/disattiva le classi CSS per ciascun elemento nella collezione. Se una classe esiste, viene rimossa; se non esiste, viene aggiunta. Puoi attivare/disattivare più nomi di classe separandoli con spazi.

// 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 le classi CSS restituite dalla funzione di callback su tutti gli elementi div
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

Proprietà degli Elementi

`.prop()`

Questo metodo recupera il valore della proprietà JavaScript del primo elemento nella collezione.

// Ottieni il valore della proprietà 'checked' del primo elemento input
$('input').prop('checked');

Questo metodo può anche impostare i valori delle proprietà JavaScript per tutti gli elementi nella collezione.

Il valore della proprietà può essere di qualsiasi tipo o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore della proprietà esistente, e this si riferisce all'elemento corrente.

Se il valore della proprietà o il valore restituito dalla funzione di callback è undefined, la proprietà originale rimane invariata.

// Imposta la proprietà 'checked' su true per tutti gli elementi input
$('input').prop('checked', true);

// Attiva/disattiva la proprietà 'checked' per tutti gli elementi input
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

Puoi anche impostare più Proprietà contemporaneamente passando un oggetto.

// Imposta più valori di Proprietà per gli elementi
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  },
});

`.removeProp()`

Questo metodo rimuove la proprietà JavaScript specificata da tutti gli elementi nella collezione.

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

`.attr()`

Questo metodo recupera il valore dell'Attributo HTML del primo elemento nella collezione.

// Ottieni il valore dell'Attributo 'username' del primo elemento div
$('div').attr('username');

Questo metodo può anche impostare i valori degli attributi HTML per tutti gli elementi nella collezione.

Il valore dell'Attributo può essere una stringa, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore dell'Attributo esistente, e this si riferisce all'elemento corrente.

Se il valore dell'Attributo o il valore restituito dalla funzione di callback è null, l'Attributo specificato verrà rimosso. Se è undefined, l'Attributo originale rimane invariato.

// Imposta l'attributo 'username' su 'mdui' per tutti gli elementi div
$('div').attr('username', 'mdui');

// Imposta l'attributo 'username' su 'mdui' per tutti gli elementi div
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

Puoi anche impostare più attributi contemporaneamente passando un oggetto.

// Imposta più valori di Attributo per tutti gli elementi div
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  },
});

`.removeAttr()`

Questo metodo rimuove gli attributi specificati da tutti gli elementi nella collezione. Più nomi di Attributo possono essere separati da spazi.

// Rimuove l'Attributo 'username' da tutti gli elementi div
$('div').removeAttr('username');

// Rimuove gli attributi 'username' e 'lastname' da tutti gli elementi div
$('div').removeAttr('username lastname');

`.val()`

Questo metodo recupera il valore del primo elemento nella collezione.

Per un elemento <select multiple="multiple">, restituisce un array contenente i valori di ciascuna opzione selezionata.

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

Questo metodo può anche impostare i valori per tutti gli elementi nella collezione.

Il valore può essere una stringa, un numero, un array (per <select multiple="multiple">, <input type="checkbox">, <input type="radio"> o <option>), o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è undefined, il valore dell'elemento verrà impostato su una stringa vuota.

// Imposta il valore su 'mdui' per tutti gli elementi selezionati
$('#input').val('mdui');

// Imposta il valore su 'mdui' per tutti gli elementi selezionati
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Questo metodo recupera il contenuto testuale combinato di tutti gli elementi nella collezione, inclusi i loro discendenti.

// Ottieni il contenuto testuale di tutti gli elementi .box
$('.box').text();

Questo metodo può anche impostare il contenuto testuale per tutti gli elementi nella collezione.

Il valore può essere una stringa, un numero, un booleano o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il contenuto testuale esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è undefined, il contenuto testuale originale rimane invariato.

// Imposta il contenuto testuale per tutti gli elementi .box
$('.box').text('contenuto testuale');

// Imposta il contenuto testuale utilizzando il valore restituito dalla funzione di callback
$('.box').text(function (index, oldTextContent) {
  return 'nuovo contenuto testuale';
});

`.html()`

Questo metodo recupera il contenuto HTML del primo elemento nella collezione.

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

Questo metodo può anche impostare il contenuto HTML per tutti gli elementi nella collezione.

Il valore può essere una stringa HTML, un elemento DOM o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il contenuto HTML esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è undefined, il contenuto HTML originale rimane invariato.

// Imposta il contenuto HTML per tutti gli elementi .box
$('.box').html('<div>nuovo contenuto html</div>');

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

Archiviazione Dati

`$.data()`

Questo metodo archivia o recupera dati su un elemento specificato.

Se il valore è undefined durante l'archiviazione dei dati, equivale a leggere i dati corrispondenti sull'elemento. Ad esempio, $.data(element, 'key', undefined) equivale a $.data(element, 'key').

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

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

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

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

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

`$.removeData()`

Questo metodo rimuove i dati archiviati dall'elemento specificato.

È possibile specificare più chiavi come una stringa separata da spazi o come un array. Se non vengono fornite chiavi, vengono rimossi tutti i dati sull'elemento.

// Rimuove i dati 'name' dall'elemento
$.removeData(document.body, 'name');

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

// Rimuove tutti i dati archiviati dall'elemento
$.removeData(document.body);

`.data()`

Questo metodo recupera o archivia i dati sugli elementi nella collezione corrente.

Se il valore è undefined durante l'archiviazione dei dati, non verrà archiviato.

Nota: Questo metodo include gli attributi data-* sugli elementi quando si recuperano i dati.

// Archivia i dati sugli elementi nella collezione corrente
$('.box').data('layout', 'dark');

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

// Recupera i dati specificati archiviati sul primo elemento nella collezione corrente
$('.box').data('layout'); // Restituisce 'dark'

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

`.removeData()`

Questo metodo rimuove i dati archiviati dagli elementi nella collezione corrente.

È possibile specificare più chiavi come una stringa separata da spazi o come un array. Se non vengono fornite chiavi, vengono rimossi tutti i dati.

Nota: Questo metodo rimuove solo i dati impostati dal metodo .data() e non influisce sugli attributi data-*.

// Rimuove i dati 'name' dagli elementi nella collezione corrente
$('.box').removeData('name');

// Rimuove i dati 'name1' e 'name2' dagli elementi nella collezione corrente. I seguenti due metodi sono equivalenti:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Rimuove tutti i dati archiviati dagli elementi nella collezione corrente
$('.box').removeData();

Stili

`.css()`

Questo metodo recupera il valore della proprietà CSS del primo elemento nella collezione.

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

Questo metodo può anche impostare i valori delle proprietà CSS per tutti gli elementi nella collezione.

Il valore può essere una stringa, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è il valore della proprietà CSS esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è undefined, il valore della proprietà CSS rimane invariato. Se è null, la corrispondente Proprietà CSS viene rimossa. Se è un numero, px viene automaticamente aggiunto come unità a meno che la proprietà non supporti px.

// Imposta il valore della proprietà CSS 'color'
$('.box').css('color', 'red');

// Imposta il valore della proprietà CSS 'color' utilizzando 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';
  },
});

`.width()`

Questo metodo recupera la larghezza (in pixel) del primo elemento nella collezione, escludendo padding, border e margin.

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

Questo metodo può anche impostare la larghezza (escludendo padding, border e margin) per tutti gli elementi nella collezione.

Il valore può essere una stringa con unità, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è la larghezza esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta la larghezza
$('.box').width('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').width(10);

// Imposta la larghezza usando una funzione di callback
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Questo metodo recupera l'altezza (in pixel) del primo elemento nella collezione, escludendo padding, border e margin.

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

Questo metodo può anche impostare l'altezza (escludendo padding, border e margin) per tutti gli elementi nella collezione.

Il valore può essere una stringa con unità, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è l'altezza esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta l'altezza
$('.box').height('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').height(10);

// Imposta l'altezza usando una funzione di callback
$('.box').height(function (index, oldHeight) {
  return 10;
});

`.innerWidth()`

Questo metodo recupera la larghezza (in pixel) del primo elemento nella collezione, includendo padding ma escludendo border e margin.

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

Questo metodo può anche impostare la larghezza (includendo padding ma escludendo border e margin) per tutti gli elementi nella collezione.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta la larghezza
$('.box').innerWidth('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').innerWidth(10);

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

`.innerHeight()`

Questo metodo recupera l'altezza (in pixel) del primo elemento nella collezione, includendo padding ma escludendo border e margin.

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

Questo metodo può anche impostare l'altezza (includendo padding, escludendo border e margin) per tutti gli elementi nella collezione.

Il valore può essere una stringa con unità, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è l'altezza esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta l'altezza
$('.box').innerHeight('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').innerHeight(10);

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

`.outerWidth()`

Questo metodo recupera la larghezza (in pixel) del primo elemento nella collezione, includendo padding e border, ma escludendo margin. Se viene passato true come parametro, viene inclusa la larghezza del margin.

// Larghezza includendo padding e border
$('.box').outerWidth();

// Larghezza includendo padding, border e margin
$('.box').outerWidth(true);

Questo metodo può anche impostare la larghezza (includendo padding e border, escludendo margin) per tutti gli elementi nella collezione.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, la larghezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta la larghezza
$('.box').outerWidth('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').outerWidth(10);

// Includi la larghezza del margine passando true come secondo parametro
$('.box').outerWidth(10, true);

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

`.outerHeight()`

Questo metodo recupera l'altezza (in pixel) del primo elemento nella collezione, includendo padding e border, ma escludendo margin. Se viene passato true come parametro, viene inclusa l'altezza del margin.

// Altezza includendo padding e border
$('.box').outerHeight();

// Altezza includendo padding, border e margin
$('.box').outerHeight(true);

Questo metodo può anche impostare l'altezza (includendo padding e border, escludendo margin) per tutti gli elementi nella collezione.

Il valore può essere una stringa con unità, un numero o il valore restituito da una funzione di callback. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo è l'altezza esistente, e this si riferisce all'elemento corrente.

Se il valore o il valore restituito dalla funzione di callback è null o undefined, l'altezza rimane invariata. Se è un numero, px viene automaticamente aggiunto come unità.

// Imposta l'altezza
$('.box').outerHeight('20%');

// I valori numerici usano 'px' come unità predefinita
$('.box').outerHeight(10);

// Includi l'altezza del margine passando true come secondo parametro
$('.box').outerHeight(10, true);

// Imposta l'altezza usando il valore restituito da una funzione di callback
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Questo metodo nasconde tutti gli elementi nella collezione.

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

`.show()`

Questo metodo visualizza tutti gli elementi nella collezione.

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

`.toggle()`

Questo metodo attiva/disattiva la visibilità di tutti gli elementi nella collezione.

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

`.offset()`

Questo metodo recupera le coordinate del primo elemento nella collezione rispetto al document.

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

Questo metodo può anche impostare le coordinate per tutti gli elementi nella collezione rispetto al document.

Il parametro può essere un oggetto con le proprietà top e left, o una funzione di callback che restituisce tale oggetto. Il primo parametro della funzione di callback è l'indice dell'elemento, il secondo sono le coordinate esistenti, e this si riferisce all'elemento corrente.

Se top o left nell'oggetto parametro è undefined, il valore corrispondente rimane invariato.

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

// Imposta le coordinate usando una funzione di callback
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Questo metodo restituisce l'elemento padre più vicino con un valore position di relative o absolute per il primo elemento nella collezione.

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

`.position()`

Questo metodo recupera l'offset del primo elemento nella collezione rispetto al suo genitore posizionato.

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

Ricerca Elementi

`.find()`

Questo metodo trova una collezione di elementi discendenti specificati in base a un selettore CSS all'interno degli elementi della collezione corrente.

// Trova elementi con classe .box tra i discendenti di #box
$('#box').find('.box');

`.children()`

Questo metodo recupera una collezione di elementi figli diretti all'interno degli elementi della collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi figli.

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

// Trova elementi con classe .box tra tutti gli elementi figli diretti di #box
$('#box').children('.box');

`.has()`

Questo metodo filtra gli elementi nella collezione corrente che contengono un elemento figlio specificato. Il parametro può essere un selettore CSS o un elemento DOM.

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

`.parent()`

Questo metodo recupera una collezione di elementi genitori diretti per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi genitori.

// Elementi genitori diretti degli elementi .box
$('.box').parent();

// Elementi genitori diretti degli elementi .box con classe .parent
$('.box').parent('.parent');

`.parents()`

Questo metodo recupera una collezione di elementi antenati per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi antenati.

// Tutti gli elementi antenati degli elementi span
$('span').parents();

// Tutti gli elementi antenati degli elementi span che sono elementi p
$('span').parents('p');

`.parentsUntil()`

Questo metodo recupera tutti gli elementi antenati per ogni elemento nella collezione corrente fino a quando non viene incontrato un elemento che corrisponde al parametro specificato (escludendo l'elemento corrispondente).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ. Un secondo parametro opzionale, un selettore CSS, può essere passato per filtrare gli elementi restituiti.

Se non vengono forniti parametri, corrisponde a tutti gli antenati, simile a .parents().

// Tutti gli elementi antenati degli elementi .item
$('.item').parentsUntil();

// Elementi antenati degli elementi .item fino a .parent
$('.item').parentsUntil('.parent');

// Elementi antenati div degli elementi .item fino a .parent
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Questo metodo recupera una collezione degli elementi fratelli immediatamente precedenti per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi fratelli.

// Elementi fratelli immediatamente precedenti degli elementi .box
$('.box').prev();

// Elementi fratelli div immediatamente precedenti degli elementi .box
$('.box').prev('div');

`.prevAll()`

Questo metodo recupera una collezione di tutti gli elementi fratelli precedenti per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi fratelli.

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

// Tutti gli elementi fratelli precedenti degli elementi .box con classe .selected
$('.box').prevAll('.selected');

`.prevUntil()`

Questo metodo recupera tutti gli elementi fratelli precedenti per ogni elemento nella collezione corrente fino a quando non viene incontrato un elemento che corrisponde al parametro specificato (escludendo l'elemento corrispondente).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ. Un secondo parametro opzionale, un selettore CSS, può essere passato per filtrare gli elementi restituiti.

Se non viene fornito alcun parametro, restituisce tutti i fratelli precedenti, simile a .prevAll().

// Tutti gli elementi fratelli precedenti degli elementi .box
$('.box').prevUntil();

// Elementi fratelli precedenti degli elementi .box fino a .until
$('.box').prevUntil('.until');

// Elementi fratelli div precedenti degli elementi .box fino a .until
$('.box').prevUntil('.until', 'div');

`.next()`

Questo metodo recupera una collezione degli elementi fratelli immediatamente successivi per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi fratelli.

// Elementi fratelli immediatamente successivi degli elementi .box
$('.box').next();

// Elementi fratelli div immediatamente successivi degli elementi .box
$('.box').next('div');

`.nextAll()`

Questo metodo recupera una collezione di tutti gli elementi fratelli successivi per tutti gli elementi nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi fratelli.

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

// Tutti gli elementi fratelli successivi degli elementi .box con classe .selected
$('.box').nextAll('.selected');

`.nextUntil()`

Questo metodo recupera tutti gli elementi fratelli successivi per ogni elemento nella collezione corrente fino a quando non viene incontrato un elemento che corrisponde al parametro specificato (escludendo l'elemento corrispondente).

Il primo parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ. Un secondo parametro opzionale, un selettore CSS, può essere passato per filtrare gli elementi restituiti.

Se non viene fornito alcun parametro, restituisce tutti i fratelli successivi, simile a .nextAll().

// Tutti gli elementi fratelli successivi degli elementi .box
$('.box').nextUntil();

// Elementi fratelli successivi degli elementi .box fino a .until
$('.box').nextUntil('.until');

// Elementi fratelli div successivi degli elementi .box fino a .until
$('.box').nextUntil('.until', 'div');

`.closest()`

Questo metodo risale dall'elemento corrente, restituendo l'elemento corrispondente più vicino. Il parametro può essere un selettore CSS, un elemento DOM o un oggetto JQ.

// Elemento .parent più vicino per gli elementi .box
$('.box').closest('.parent');

`.siblings()`

Questo metodo recupera i fratelli per ogni elemento nella collezione corrente. È possibile passare un selettore CSS come parametro per filtrare gli elementi fratelli.

// Tutti i fratelli per gli elementi .box
$('.box').siblings();

// Fratelli con classe .selected per gli elementi .box
$('.box').siblings('.selected');

`.add()`

Questo metodo 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 elementi con classe .selected alla collezione corrente
$('.box').add('.selected');

Manipolazione degli Elementi

`.empty()`

Questo metodo rimuove tutti gli elementi figli dall'elemento corrente.

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

`.remove()`

Questo metodo rimuove dal DOM gli elementi che sono nella collezione corrente. È possibile passare un selettore CSS come parametro per rimuovere solo gli elementi che corrispondono al parametro.

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

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

`.prepend()`

Questo metodo aggiunge contenuto all'inizio degli elementi nella collezione corrente. Accetta una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri. È possibile utilizzare più parametri.

Puoi anche fornire 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 di callback è l'indice dell'elemento, il secondo è il suo HTML originale, e this si riferisce all'elemento corrente.

Il metodo restituisce la collezione originale.

// Inserisci un singolo elemento
$('<p>Vorrei dire: </p>').prepend('<b>Ciao</b>');
// Risultato: <p><b>Ciao</b>Vorrei dire: </p>

// Inserisci più elementi
$('<p>Vorrei dire: </p>').prepend('<b>Ciao</b>', '<b>Mondo</b>');
// Risultato: <p><b>Ciao</b><b>Mondo</b>Vorrei dire: </p>

// Inserisci un elemento usando una funzione di callback
$('<p>Ciao</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato: <p><b>Ciao0</b>Ciao</p>

`.prependTo()`

Questo metodo inserisce gli elementi della collezione corrente all'inizio dell'elemento specificato. Accetta un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri.

Il metodo restituisce la collezione originale.

$('<p>Ciao</p>').prependTo('<p>Vorrei dire: </p>');
// Risultato: [ <p><p>Ciao</p>Vorrei dire: </p> ]

`.append()`

Questo metodo aggiunge contenuto alla fine degli elementi nella collezione corrente.

Accetta una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri. È possibile utilizzare più parametri.

Il metodo restituisce la collezione originale.

// Inserisci un singolo elemento
$('<p>Vorrei dire: </p>').append('<b>Ciao</b>');
// Risultato: <p>Vorrei dire: <b>Ciao</b></p>

// Inserisci più elementi
$('<p>Vorrei dire: </p>').append('<b>Ciao</b>', '<b>Mondo</b>');
// Risultato: <p>Vorrei dire: <b>Ciao</b><b>Mondo</b></p>

// Inserisci un elemento usando una funzione di callback
$('<p>Ciao</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato: <p>Ciao<b>Ciao0</b></p>

`.appendTo()`

Questo metodo inserisce gli elementi della collezione corrente alla fine dell'elemento specificato.

Accetta un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri.

Il metodo restituisce la collezione originale.

$('<p>Ciao</p>').appendTo('<p>Vorrei dire: </p>');
// Risultato: <p>Vorrei dire: <p>Ciao</p></p>

`.after()`

Questo metodo inserisce il contenuto dopo gli elementi nella collezione corrente.

Accetta una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri. È possibile utilizzare più parametri.

Il metodo restituisce la collezione originale.

// Inserisci un singolo elemento
$('<p>Vorrei dire: </p>').after('<b>Ciao</b>');
// Risultato: <p>Vorrei dire: </p><b>Ciao</b>

// Inserisci più elementi
$('<p>Vorrei dire: </p>').after('<b>Ciao</b>', '<b>Mondo</b>');
// Risultato: <p>Vorrei dire: </p><b>Ciao</b><b>Mondo</b>

// Inserisci un elemento usando una funzione di callback
$('<p>Ciao</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato: <p>Ciao</p><b>Ciao0</b>

`.insertAfter()`

Questo metodo inserisce gli elementi della collezione corrente dopo l'elemento specificato.

Gli elementi esistenti nella collezione vengono spostati, non copiati. Se ci sono più target, gli elementi vengono clonati e aggiunti dopo ogni target.

Il metodo accetta un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri.

$('<b>Ciao</b>').insertAfter('<p>Vorrei dire: </p>');
// Risultato: <p>Vorrei dire: </p><b>Ciao</b>

`.before()`

Questo metodo inserisce il contenuto prima degli elementi nella collezione corrente.

Accetta una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri. È possibile utilizzare più parametri.

Il metodo restituisce la collezione originale.

// Inserisci un singolo elemento
$('<p>Vorrei dire: </p>').before('<b>Ciao</b>');
// Risultato: <b>Ciao</b><p>Vorrei dire: </p>

// Inserisci più elementi
$('<p>Vorrei dire: </p>').before('<b>Ciao</b>', '<b>Mondo</b>');
// Risultato: <b>Ciao</b><b>Mondo</b><p>Vorrei dire: </p>

// Inserisci un elemento usando una funzione di callback
$('<p>Ciao</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Risultato: <b>Ciao0</b><p>Ciao</p>

`.insertBefore()`

Questo metodo inserisce gli elementi della collezione corrente prima dell'elemento specificato.

Gli elementi esistenti nella collezione vengono spostati, non copiati. Se ci sono più target, gli elementi vengono clonati e aggiunti prima di ogni target.

Il metodo accetta un selettore CSS, una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri.

$('<p>Vorrei dire: </p>').insertBefore('<b>Ciao</b>');
// Risultato: <p>Vorrei dire: </p><b>Ciao</b>

`.replaceWith()`

Questo metodo sostituisce gli elementi nella collezione corrente con il contenuto specificato.

Accetta una stringa HTML, un elemento DOM, un array di elementi DOM o un oggetto JQ come parametri.

Il metodo restituisce la collezione originale, cioè gli elementi che sono stati sostituiti.

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

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

`.replaceAll()`

Questo metodo sostituisce il contenuto specificato con gli elementi nella collezione corrente.

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

Il metodo restituisce la collezione originale, cioè gli elementi che sono stati utilizzati per la sostituzione.

// Sostituisce tutti gli elementi .box con gli elementi .new
$('.new').replaceAll('.box');

`.clone()`

Questo metodo crea una copia profonda di tutti gli elementi nella collezione corrente.

Utilizza il metodo nativo cloneNode e non copia i dati e i gestori di eventi nei nuovi elementi. Questo comportamento differisce da jQuery, dove un singolo parametro determina se copiare dati e gestori di eventi.

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

Modulo

`.serializeArray()`

Questo metodo combina i valori degli elementi del modulo in un array di oggetti con coppie chiave-valore name e value.

Può operare su singoli elementi del modulo o su un intero <form>.

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

`.serializeObject()`

Questo metodo converte i valori degli elementi del modulo in un oggetto.

Se ci sono chiavi duplicate, i valori corrispondenti verranno convertiti in un array.

Può operare su singoli elementi del modulo o su un intero <form>.

$('form').serializeObject();
// { name: mdui, password: 123456 }

`.serialize()`

Questo metodo compila i valori degli elementi del modulo in una stringa.

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

Evento

`.on()`

Questo metodo associa un gestore di eventi a ciascun elemento nella collezione per un evento specifico. Ecco alcuni esempi:

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

// Associa più eventi
$('.box').on('click focus', function (e) {
  console.log('Questa funzione verrà attivata sia per gli eventi click che focus');
});

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

// Associazione di più eventi e gestori
$('.box').on({
  click: function (e) {
    console.log('Cliccato sull'elemento .box');
  },
  focus: function (e) {
    console.log('Focalizzato sull'elemento .box');
  },
});

// Passaggio di parametri
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('Cliccato sull'elemento .box e passati parametri al gestore dell'evento');
  // e._data è {key1: 'value1', key2: 'value2'}
});

// Associazione di più eventi e gestori con parametri
$('.box').on(
  {
    click: function (e) {
      console.log('Cliccato sull'elemento .box');
      // e._data è {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Focalizzato sull'elemento .box');
      // e._data è {key1: 'value1', key2: 'value2'}
    },
  },
  { key1: 'value1', key2: 'value2' },
);

// Delegazione di eventi con parametri
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log('Cliccato sull'elemento .box e passati parametri al gestore dell'evento');
    // e._data è {key1: 'value1', key2: 'value2'}
  },
);

// Associa più eventi e gestori con delegazione di eventi
$(document).on(
  {
    click: function (e) {
      console.log('Cliccato sull'elemento .box');
    },
    focus: function (e) {
      console.log('Focalizzato sull'elemento .box');
    },
  },
  '.box',
);

// Associa più eventi e gestori con delegazione di eventi e parametri
$(document).on(
  {
    click: function (e) {
      console.log('Cliccato sull'elemento .box');
      // e._data è {key1: 'value1', key2: 'value2'}
    },
    focus: function (e) {
      console.log('Focalizzato sull'elemento .box');
      // e._data è {key1: 'value1', key2: 'value2'}
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

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

// Namespace degli eventi
$('.box').on('click.myPlugin', function () {
  console.log('Cliccato sull'elemento .box');
});

`.one()`

Questo metodo associa un gestore di eventi a ciascun elemento corrispondente per un evento specifico, ma l'evento verrà attivato una sola volta. L'utilizzo è lo stesso di .on().

`.off()`

Questo metodo scollega uno o più gestori di eventi da ciascun elemento nella collezione. Ecco alcuni esempi:

// Scollega tutti i gestori di eventi
$('.box').off();

// Scollega un evento specifico
$('.box').off('click');

// Scollega più eventi
$('.box').off('click focus');

// Scollega un gestore di eventi specifico
$('.box').off('click', callback);

// Scollega un evento con delegazione
$(document).off('click', '.box');

// Scollega un gestore di eventi specifico con delegazione
$(document).off('click', '.box', callback);

// Scollega più gestori di eventi
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Scollega più gestori di eventi con delegazione
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

// I nomi degli eventi supportano i namespace. Quanto segue scollega tutti gli eventi che terminano con .myPlugin
$(document).off('.myPlugin');

`.trigger()`

Questo metodo attiva un evento specificato su ciascun elemento nella collezione. Ecco alcuni esempi:

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

// Passa parametri quando si attiva un evento
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

// I nomi degli eventi supportano i namespace
$('.box').trigger('click.myPlugin');

// Parametri CustomEvent
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

ajax

`$.ajaxSetup()`

Questo metodo imposta parametri globali per le richieste AJAX.

$.ajaxSetup({
  // Disabilita gli eventi Ajax globali per impostazione predefinita
  global: false,

  // Imposta la richiesta POST come predefinita
  method: 'POST',
});

Consulta Opzioni Ajax per un elenco dettagliato dei parametri.

`$.ajax()`

Questo metodo avvia una richiesta AJAX e restituisce una Promise.

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

promise
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Consulta Opzioni Ajax per un elenco dettagliato dei parametri.

Puoi ascoltare gli eventi AJAX globali utilizzando il metodo .on().

// Attivato quando inizia una richiesta Ajax
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri del metodo $.ajax()
});

// Attivato quando una richiesta Ajax ha successo
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri del metodo $.ajax()
  // response: Risposta della richiesta
});

// Attivato quando una richiesta Ajax fallisce
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri del metodo $.ajax()
});

// Attivato quando una richiesta Ajax è completata
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: oggetto XMLHttpRequest
  // options: parametri del metodo $.ajax()
});

Opzioni Ajax

Proprietà	Tipo	Predefinito
`url`	`string`	URL della pagina corrente
L'URL della richiesta.
`method`	`string`	`GET`
Il metodo della richiesta. Può essere uno dei seguenti: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
I dati da inviare al server.
`processData`	`boolean`	`true`
Indica se convertire i dati passati in una stringa di query.
`async`	`boolean`	`true`
Indica se la richiesta deve essere gestita in modo asincrono.
`cache`	`boolean`	`true`
Indica se memorizzare nella cache la richiesta. Questo è applicabile solo alle richieste `GET` e `HEAD`.
`username`	`string`	`''`
Il nome utente per l'autenticazione HTTP.
`password`	`string`	`''`
La password per l'autenticazione HTTP.
`headers`	`object`	`{}`
Dati da aggiungere agli header. Questo può essere sovrascritto nel callback `beforeSend`. I campi con valori stringa o `null` verranno inviati, i campi con valori `undefined` verranno rimossi.
`xhrFields`	`object`	`{}`
Questa opzione consente di impostare i dati sull'oggetto `XMLHttpRequest`. `$.ajax({ url: 'a cross-domain URL', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
Un oggetto di codici di stato HTTP e funzioni corrispondenti. `$.ajax({ statusCode: { 404: function (xhr, textStatus) { alert('Chiamato quando il codice di stato è 404'); }, 200: function (data, textStatus, xhr) { alert('Chiamato quando il codice di stato è 200'); } } });` I codici di stato tra 200 e 299, o il codice di stato 304, indicano successo. I parametri della funzione sono gli stessi del callback `success`. Per altri codici di stato, i parametri della funzione sono gli stessi del callback `error`.
`dataType`	`string`	`text`
Il tipo di dati atteso dal server. Può essere `text` o `json`.
`contentType`	`string`	`application/x-www-form-urlencoded`
Il tipo di codifica del contenuto. Impostare su `false` per evitare di impostare `Content-Type`.
`timeout`	`number`	`0`
Il timeout della richiesta in millisecondi. Un valore di `0` significa nessun timeout.
`global`	`boolean`	`true`
Indica se attivare gli eventi AJAX globali.
`beforeSend`	`function`	-
Questa funzione viene chiamata prima che la richiesta venga inviata. Se restituisce `false`, la richiesta AJAX verrà annullata. `$.ajax({ beforeSend: function (xhr) { // xhr: l'oggetto XMLHttpRequest } });`
`success`	`function`	-
Questa funzione viene chiamata dopo che la richiesta ha avuto successo. `$.ajax({ success: function (data, textStatus, xhr) { // data: dati restituiti dalla richiesta AJAX // textStatus: una stringa contenente il codice di successo // xhr: l'oggetto XMLHttpRequest } });`
`error`	`function`	-
Questa funzione viene chiamata quando si verifica un errore nella richiesta. `$.ajax({ error: function (xhr, textStatus) { // xhr: l'oggetto XMLHttpRequest // textStatus: una stringa contenente il codice di errore } });`
`complete`	`function`	-
Questa funzione viene chiamata quando la richiesta è completata, indipendentemente dal successo o dal fallimento. `$.ajax({ complete: function (xhr, textStatus) { // xhr: l'oggetto XMLHttpRequest // textStatus: una stringa che descrive lo stato } });`

Capitolo precedente

TopAppBar

Capitolo successivo

dialog