8.1 Connessione di jQuery
Infine, siamo arrivati alla libreria jQuery. Quando questo articolo è stato scritto, è già obsoleto e non viene quasi mai utilizzato in nuovi progetti . Ma un tempo era molto popolare, molto ben documentato e ci sono molti esempi su Internet con il suo utilizzo .
Pertanto, se stai scrivendo un piccolo progetto web e non vuoi passare mesi a imparare i framework moderni, ti consiglio di utilizzare la libreria jQuery.
Per utilizzare le migliaia di funzioni jQuery, devi solo includerle nella tua pagina. Puoi farlo in questo modo:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Lavorare con jQuery può essere diviso in due tipi.
Innanzitutto, puoi ottenere un oggetto libreria jQuery, che è un normale elemento HTML racchiuso in un oggetto jQuery personalizzato.
In secondo luogo, jQuery ha diversi oggetti globali che non sono associati a elementi HTML. Devono anche essere usati.
Iniziamo con il primo.
8.2 Lavorare con i selettori
jQuery utilizza i selettori per lavorare con gli oggetti (ricordi i CSS e le sue classi?). Quindi, in jQuery, se vuoi selezionare un oggetto o un gruppo di oggetti, devi impostare il loro selettore.
Esempi:
| Codice | Descrizione | Nota | |
|---|---|---|---|
| 1 | $("div") | Seleziona tutti gli oggetti con un tag DIV | molti oggetti |
| 2 | $("img.#immagine123") | Seleziona tutti gli oggetti con tag IMG e ID == image123 | un oggetto |
| 3 | $("#immagine123") | Seleziona tutti gli oggetti con ID == image123 | un oggetto |
| 4 | $("div.articolo") | Seleziona tutti gli oggetti con un tag DIV che hanno un articolo di classe | molti oggetti |
Diciamo che vogliamo aggiungere la gestione degli eventi a tutti i collegamenti onclick, ecco come possiamo farlo con jQuery:
$("a").click(function() {
alert("Click");
});Qui vengono eseguiti tre passaggi:
- Ottiene gli oggetti che corrispondono al selector
"a". - Creiamo una funzione anonima che chiama il
alert(). - Impostiamo questa funzione come gestore di eventi
clickper tutti gli oggetti dal punto 1.
Un altro aspetto positivo di jQuery è che il suo codice è facile da leggere. Non ci vuole molto per capire come funziona tutto. Se esiste un codice funzionante, è abbastanza facile capire cosa fa.
8.3 Lavorare con gli elementi del documento
Diamo un'occhiata ad alcuni scenari per lavorare con un documento usando jQuery.
Ottieni il valore di un elemento (per elementi che hanno valori):
var result = $ ("selector").value();Imposta valore elemento (per elementi che hanno valori):
$ ("selector").value(newValue);Come aggiungere HTML all'interno di alcuni elementi?
$ ("selector").html(newHTML);E come ottenere l'HTML che si trova all'interno dell'elemento?
var html = $ ("selector").html();Cosa succede se voglio ottenere/aggiungere non HTML, ma solo testo? Anche qui nessuna sorpresa.
var html = $ ("selector").text();Cosa succede se voglio ottenere/cambiare il colore di un elemento?
$ ("selector").color("red");Se hai bisogno di lavorare con gli stili, anche questo è facile da fare:
$ ("selector").css("color", "red");Come aggiungere un nuovo elemento?
$ (".container").append($("h3"));