CONTATTACI

Guide per aspiranti programmatori

Sviluppatore dall'aria dubbiosa che si interroga su che cos'è jquery
Lezione 10 / 36

Metodi di base per la manipolazione del DOM in jQuery

Abbiamo detto che la manipolazione del Document Object Model (DOM) è una delle funzionalità fondamentali di jQuery, in quanto questa libreria semplifica il processo per modificare, aggiungere, rimuovere e interagire con gli elementi HTML di una pagina web. Ma quali sono, concretamente, i metodi di base forniti da jQuery per manipolare il DOM? Scopriamolo insieme, illustrando ciascun metodo con esempi pratici.

 

La manipolazione del DOM in jQuery è resa possibile grazie a una serie di metodi intuitivi che consentono di interagire con gli elementi della pagina in modo semplice e potente. Questi metodi possono essere suddivisi in diverse categorie:

  • modifica del contenuto: jQuery text(), jQuery html(), jQuery val() 
  • gestione degli attributi: jQuery attr(), jQuery removeAttr(), jQuery addClass(), jQuery removeClass(), jQuery toggleClass()
  • manipolazione del CSS: jQuery css(), jQuery hide(), jQuery show(), jQuery toggle()
  • modifica della struttura del DOM: jQuery append(), jQuery prepend(), jQuery after(), jQuery before(), jQuery remove(), jQuery empty()

 

Metodi per modificare il contenuto in jQuery

  1. jQuery .text(): Imposta o restituisce il testo di un elemento.
  2. jQuery .html(): Imposta o restituisce l’HTML di un elemento.
  3. jQuery .val(): Imposta o restituisce il valore di un campo di input.

 

Esempi

$("#paragrafo").text("Testo aggiornato"); // Aggiorna il testo di un paragrafo
$("#contenitore").html("<p>Nuovo paragrafo</p>"); // Inserisce HTML in un div
$("input").val("Nuovo valore"); // Cambia il valore di un campo di input

Metodi per gestire gli attributi in jQuery

  1. jQuery .attr(): Imposta o restituisce il valore di un attributo.
  2. jQuery .removeAttr(): Rimuove un attributo.
  3. jQuery .addClass(), .removeClass(), .toggleClass(): Gestiscono le classi di un elemento.

 

Esempi

$("a").attr("href", "https://aulab.it/"); // Imposta l'attributo href di un link
$("img").removeAttr("alt"); // Rimuove l'attributo alt da un'immagine
$(".btn").addClass("active"); // Aggiunge una classe a un bottone
$(".btn").removeClass("active"); // Rimuove una classe a un bottone
$(".btn").toggleClass("active"); // Aggiunge o rimuove una classe (se presente o meno) a un bottone

Metodi per manipolare il CSS in jQuery

  1. jQuery .css(): Imposta o restituisce il valore di una proprietà CSS.
  2. jQuery .hide(), .show(), .toggle(): Gestiscono la visibilità di un elemento.

 

Esempi

$("#elemento").css("color", "red"); // Imposta il colore del testo di un elemento
$("#box").hide(); // Nasconde un elemento visibile
$("#box").show(); // Rende visibile un elemento nascosto
$(".menu").toggle(); // Alterna la visibilità di un elemento

Metodi per modificare la struttura del DOM in jQuery

  1. jQuery .append(), .prepend(): Aggiungono contenuto alla fine o all’inizio di un elemento.
  2. jQuery .after(), .before(): Inseriscono contenuto dopo o prima di un elemento.
  3. jQuery .remove(), .empty() : Rimuovono elementi o il loro contenuto.

 

Esempi

$("#lista").append("<li>Nuovo elemento</li>"); // Aggiunge un elemento alla fine di una lista
$("h2").before("<h1>Titolo Principale</h1>"); // Inserisce un titolo prima di un altro
$(".temporaneo").remove(); // Rimuove elementi con classe 'temporaneo'

Questa era una panoramica dall’alto dei vari metodi delle categorie citate; nelle sezioni successive, proviamo ad esplorare queste categorie un po’ più nel dettaglio.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.