Non hai bisogno di jQuery

Il mondo del Frontend si evolve rapidamente oggigiorno, i browsers moderni hanno gia' implementato un'ampia gamma di DOM/BOM API soddisfacenti. Non dobbiamo imparare jQuery dalle fondamenta per la manipolazione del DOM o di eventi. Nel frattempo, grazie al prevalicare di librerie per il frontend come React, Angular a Vue, manipolare il DOM direttamente diventa un anti-pattern, di consequenza jQuery non e' mai stato meno importante. Questo progetto sommarizza la maggior parte dei metodi e implementazioni alternative a jQuery.

Gli snippet sono pensati per gli attuali browser evergreen (Chrome, Edge, Firefox, Safari). Internet Explorer non è più supportato da Microsoft, per cui i fallback specifici per IE sono stati rimossi. Se vi servono ancora, consultate l'ultima versione compatibile con IE.

Traduzioni

Query Selector

Al posto di comuni selettori come class, id o attributi possiamo usare document.querySelector o document.querySelectorAll per sostituzioni. La differenza risiede in:

document.querySelector restituisce il primo elemento combiaciante
document.querySelectorAll restituisce tutti gli elementi corrispondenti come NodeList statica. Supporta forEach e può essere convertita in Array usando Array.from(document.querySelectorAll(selector))
Se nessun elemento corrisponde, jQuery restituisce un oggetto jQuery vuoto e document.querySelectorAll una NodeList vuota, mentre document.querySelector restituisce null.

Notare: document.getElementById, document.getElementsByClassName e document.getElementsByTagName sono leggermente più veloci di querySelector*, ma getElementsBy* restituiscono una HTMLCollection live, che cambia al variare del DOM. Preferite querySelector*, a meno che non abbiate misurato un collo di bottiglia.

1.0 Query da selettore

// jQuery
$('selector');

// Nativo
document.querySelectorAll('selector');

1.1 Query da classe

// jQuery
$('.class');

// Nativo
document.querySelectorAll('.class');

// or
document.getElementsByClassName('class');

1.2 Query da id

// jQuery
$('#id');

// Nativo
document.querySelector('#id');

// o
document.getElementById('id');

1.3 Query da attributo

// jQuery
$('a[target=_blank]');

// Nativo
document.querySelectorAll('a[target=_blank]');

1.4 Trovare qualcosa.

Trovare nodes

// jQuery
$el.find('li');

// Nativo
el.querySelectorAll('li');

Trovare body

// jQuery
$('body');

// Nativo
document.body;

Trovare Attributi

// jQuery
$el.attr('foo');

// Nativo
el.getAttribute('foo');

Trovare attributo data

// jQuery
$el.data('foo');

// Nativo
el.dataset.foo;

// o
el.getAttribute('data-foo');

1.5 Fratelli/Precedento/Successivo Elemento

Elementi fratelli

// jQuery
$el.siblings();

// Nativo
[...el.parentNode.children].filter((child) =>
  child !== el
);

Elementi precedenti

// jQuery
$el.prev();

// Nativo
el.previousElementSibling;

Elementi successivi

// jQuery
$el.next();

// Nativo
el.nextElementSibling;

1.6 Il piu' vicino

Restituisce il primo elementi combiaciante il selettore fornito, attraversando dall'elemento corrente fino al document .
```
// jQuery
$el.closest(selector);

// Nativo
el.closest(selector);
```

1.7 Fino a parenti

Ottiene il parente di ogni elemento nel set corrente di elementi combiacianti, fino a ma non incluso, l'elemento combiaciante il selettorer, DOM node, o jQuery object.

// jQuery
$el.parentsUntil(selector, filter);

// Nativo
function parentsUntil(el, selector, filter) {
  const result = [];

  // il match parte dal parente
  el = el.parentElement;
  while (el && !el.matches(selector)) {
    if (!filter || el.matches(filter)) {
      result.push(el);
    }
    el = el.parentElement;
  }
  return result;
}

1.8 Form

Input/Textarea

// jQuery
$('#my-input').val();

// Nativo
document.querySelector('#my-input').value;

Get index of e.currentTarget between .radio

// jQuery
$('.radio').index(e.currentTarget);

// Nativo
[...document.querySelectorAll('.radio')].indexOf(e.currentTarget);

1.9 Iframe Contents

$('iframe').contents() restituisce contentDocument per questo specifico iframe

Iframe contenuti

// jQuery
$iframe.contents();

// Nativo
iframe.contentDocument;

Iframe Query

// jQuery
$iframe.contents().find('.css');

// Nativo
iframe.contentDocument.querySelectorAll('.css');

⬆ back to top

CSS & Style

2.1 CSS

Ottenere style

// jQuery
$el.css('color');

// Nativo
// NOTA: restituisce il valore risolto, ad es. 'rgb(255, 0, 17)' anziché '#f01'
getComputedStyle(el).color;

Settare style

// jQuery
$el.css({ color: '#f01' });

// Nativo
el.style.color = '#f01';

Settare più stili

// jQuery
$el.css({ color: '#f01', 'border-color': '#f02' });

// Nativo
Object.assign(el.style, { color: '#f01', borderColor: '#f02' });

Aggiungere classe

// jQuery
$el.addClass(className);

// Nativo
el.classList.add(className);

Rimouvere class

// jQuery
$el.removeClass(className);

// Nativo
el.classList.remove(className);

has class

// jQuery
$el.hasClass(className);

// Nativo
el.classList.contains(className);

Toggle class

// jQuery
$el.toggleClass(className);

// Nativo
el.classList.toggle(className);

2.2 Width & Height

Width e Height sono teoricamente identici, prendendo Height come esempio:

Window height

// jQuery
$(window).height();

// senza scrollbar, si comporta come jQuery
window.document.documentElement.clientHeight;

// con scrollbar
window.innerHeight;

Document height

// jQuery
$(document).height();

// Nativo
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

Element height

// jQuery
$el.height();

// Nativo
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// preciso a intero (quando `border-box`, e' `height - border`; quando `content-box`, e' `height + padding`)
el.clientHeight;

// preciso a decimale (quando `border-box`, e' `height`; quando `content-box`, e' `height + padding + border`)
el.getBoundingClientRect().height;

Element outer height

Altezza comprensiva di padding e border, opzionalmente anche del margin.

// jQuery
$el.outerHeight();

// Nativo (arrotondato a intero, ignora le trasformazioni CSS)
el.offsetHeight;

// jQuery
$el.outerHeight(true);

// Nativo
function getOuterHeight(el) {
  const styles = window.getComputedStyle(el);
  return el.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
}

2.3 Position & Offset

Position

// jQuery
$el.position();

// Nativo
const position = { left: el.offsetLeft, top: el.offsetTop };

Offset

// jQuery
$el.offset();

// Nativo
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.scrollY,
    left: box.left + window.scrollX
  };
}

2.4 Scroll Top

// jQuery
$(window).scrollTop();

// Nativo
window.scrollY;

⬆ back to top

Manipolazione DOM

3.1 Remove

// jQuery
$el.remove();

// Nativo
el.remove();

3.2 Text

Get text

// jQuery
$el.text();

// Nativo
el.textContent;

Set text

// jQuery
$el.text(string);

// Nativo
el.textContent = string;

3.3 HTML

Ottenere HTML

// jQuery
$el.html();

// Nativo
el.innerHTML;

Settare HTML

// jQuery
$el.html(htmlString);

// Nativo
el.innerHTML = htmlString;

3.4 Append

appendere elemento figlio dopo l'ultimo elemento figlio del genitore

// jQuery: sintassi unificata per DOMString e oggetti Node
$parent.append(newEl | '<div id="container">Hello World</div>');

// Nativo (Element o testo): le stringhe vengono inserite come testo semplice, non interpretate come HTML
parent.append(newEl | 'Hello World');

// Nativo (stringa HTML)
parent.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

3.5 Prepend

// jQuery: sintassi unificata per DOMString e oggetti Node
$parent.prepend(newEl | '<div id="container">Hello World</div>');

// Nativo (Element o testo): le stringhe vengono inserite come testo semplice, non interpretate come HTML
parent.prepend(newEl | 'Hello World');

// Nativo (stringa HTML)
parent.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

3.6 insertBefore

Inserire un nuovo node prima dell'elemento selezionato

// jQuery
$newEl.insertBefore(selector);

const el = document.querySelector(selector);

// Nativo (Element)
el.before(newEl);

// Nativo (stringa HTML)
el.insertAdjacentHTML('beforebegin', '<div id="container">Hello World</div>');

3.7 insertAfter

Insert a new node after the selected elements

// jQuery
$newEl.insertAfter(selector);

const el = document.querySelector(selector);

// Nativo (Element)
el.after(newEl);

// Nativo (stringa HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

3.8 is

Restituisce true se combacia con l'elemento selezionato

// jQuery - Notare `is` funziona anche con `function` o `elements` non di importanza qui
$el.is(selector);

// Nativo
el.matches(selector);

⬆ back to top

Ajax

Fetch API è il sostituto standard di XMLHttpRequest e funziona in tutti i browser moderni. A differenza di $.ajax, fetch non rifiuta la Promise in caso di status HTTP di errore come 404 o 500: dovete controllare voi response.ok. Per JSONP, provate fetch-jsonp.

4.0 Richiedere JSON

// jQuery
$.getJSON(url).done(handleData).fail(handleError);

// Nativo
fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .then(handleData)
  .catch(handleError);

4.0.1 Inviare JSON con POST

// jQuery
$.ajax({
  url,
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(data),
});

// Nativo
fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

4.0.2 Annullamento e timeout

// jQuery
const jqXHR = $.ajax({ url, timeout: 5000 });
jqXHR.abort();

// Nativo
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();

// Nativo (timeout)
fetch(url, { signal: AbortSignal.timeout(5000) });

4.1 Caricare dati dal server e inserire l'HTML restituito nell'elemento selezionato.

// jQuery
$(selector).load(url, completeCallback)

// Nativo
fetch(url)
  .then((response) => response.text())
  .then((html) => {
    document.querySelector(selector).innerHTML = html;
  })
  .then(completeCallback);

⬆ back to top

Eventi

5.1 Bind un evento con on

// jQuery
$el.on(eventName, eventHandler);

// Nativo
el.addEventListener(eventName, eventHandler);

5.1.1 Bind un evento una sola volta con one

// jQuery
$el.one(eventName, eventHandler);

// Nativo
el.addEventListener(eventName, eventHandler, { once: true });

5.1.2 Delegazione degli eventi

// jQuery
$el.on(eventName, selector, eventHandler);

// Nativo
el.addEventListener(eventName, (event) => {
  const target = event.target.closest(selector);
  if (target && el.contains(target)) {
    eventHandler.call(target, event);
  }
});

5.2 Unbind an event with off

// jQuery
$el.off(eventName, eventHandler);

// Nativo
el.removeEventListener(eventName, eventHandler);

// Nativo: rimuovere più listener in una volta sola, come con i namespace di jQuery
const controller = new AbortController();
el.addEventListener('click', onClick, { signal: controller.signal });
el.addEventListener('keydown', onKeydown, { signal: controller.signal });
controller.abort();

5.3 Trigger

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Nativo. Gli eventi jQuery fanno bubbling, quelli nativi solo se si imposta `bubbles: true`.
// Leggete i dati da `event.detail` nell'handler.
const event = new CustomEvent('custom-event', {
  bubbles: true,
  cancelable: true,
  detail: { key1: 'data' },
});

el.dispatchEvent(event);

⬆ back to top

Utilities

6.1 isArray

// jQuery
$.isArray(array);

// Nativo
Array.isArray(array);

6.2 Trim

// jQuery
$.trim(string);

// Nativo
string.trim();

6.3 Object Assign

Extend: unisce il contenuto di due o più oggetti in un nuovo oggetto, senza modificare gli argomenti. Come $.extend senza deep, Object.assign e lo spread creano solo una copia superficiale (shallow copy).

// jQuery
$.extend({}, object1, object2);

// Nativo
Object.assign({}, object1, object2);

// Nativo (spread)
({ ...object1, ...object2 });

Copia profonda (deep copy) di un singolo oggetto:

// jQuery
$.extend(true, {}, object);

// Nativo. Funzioni e nodi DOM non possono essere clonati
structuredClone(object);

6.4 Contains

// jQuery
$.contains(el, child);

// Nativo
el !== child && el.contains(child);

⬆ back to top

Alternative

Forse non hai bisogno di jQuery - Esempi di come creare eventi comuni, elementi, ajax etc usando puramente javascript.
MDN Web Docs - Documentazione di riferimento per tutte le DOM API usate qui.
Baseline - Per verificare quali funzionalità della piattaforma web si possono usare in sicurezza su tutti i browser.

Supporto Browsers


Ultimo ✔	Ultimo ✔	Ultimo ✔	Ultimo ✔	Ultimo ✔

Alcuni snippet usano API più recenti: Promise.withResolvers() (2024), el.replaceChildren() (2020) e AbortSignal.timeout() (2022). Se dovete supportare browser meno recenti, verificate su Baseline.

Licenza

MIT

camsong/You-Dont-Need-jQuery

Documentazione del progetto

Non hai bisogno di jQuery

Tabella contenuti

Traduzioni

Query Selector

CSS & Style

Manipolazione DOM

Ajax

Eventi

Utilities

Alternative

Supporto Browsers

Licenza

Classifiche attuali

Andamento degli ultimi 30 giorni