Manipolazione del DOM con jQuery - 2
Manipolazione del DOM con jQuery - 2
Manipolazione del DOM con jQuery - 2 è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 1 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Introduzione e append
Salve,
Negli esempi precedenti, abbiamo eseguito operazioni di aggiornamento o lettura sugli oggetti HTML DOM.
Impareremo a eseguire operazioni di inserimento con il metodo append().
Osserviamo un esempio.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
Dopo aver eseguito il codice precedente, il metodo append aggiungerà il codice HTML (passato come argomento) alla fine dell'elemento #test.
prepend
metodo prepend()
Il metodo opposto a append() è il metodo prepend() . Il metodo append() aggiunge il contenuto alla fine dell'elemento di destinazione, mentre prepend lo aggiunge all'inizio.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Domanda
Con i metodi append e prepend potevamo aggiungere nuovi elementi HTML alla fine e all'inizio dell'elemento di destinazione.
Ma come possiamo fare se vogliamo aggiungerlo come elemento adiacente a quello di destinazione?
Esempio
Continuiamo con l'esempio precedente.
Nel primo caso il nostro nodo HTML è il seguente.
<div id="test">
<p>initial paragraph</p>
</div>metodi after e before
metodi after() e before()
Possiamo aggiungere elementi HTML prima e dopo l'elemento di destinazione con i metodi after() e before() .
Nel codice dell'esempio seguente, un nuovo elemento è stato aggiunto all'elemento con id #test subito prima e subito dopo di esso nella gerarchia degli elementi adiacenti.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
inserimento multiplo
Finora abbiamo visto i metodi prepend(), append(), before() e after(). Ho dimenticato di spiegare un argomento. Mi scusi, a volte posso essere smemorato 😇.
Quindi, cosa dobbiamo fare se vogliamo aggiungere più di un nodo contemporaneamente?
Come nell'esempio seguente,
possiamo aggiungere più di un nodo contemporaneamente passando più di un argomento ai metodi corrispondenti.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>esempio di concatenamento
Nell'esempio precedente sono stati aggiunti più nodi contemporaneamente. Come può vedere, la sintassi rimane la stessa anche quando si utilizzano metodi diversi.
Inoltre, possiamo scrivere codice in jQuery concatenando i metodi.
In questo modo possiamo scrivere codice più breve ed efficace.
Osserviamo l'esempio e impariamo a scrivere codice concatenato in jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>metodo wrap
metodo wrap()
Quale metodo useremo se vogliamo inserire l'elemento HTML in un altro contenitore?
Naturalmente, il metodo wrap() .
L'esempio seguente mostra un semplice utilizzo del metodo wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
metodo unwrap
metodo unwrap()
Abbiamo a disposizione il metodo opposto di wrap(). Con il metodo unwrap(), possiamo eliminare l'elemento genitore di un elemento di destinazione.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();metodo empty
metodo empty()
Vediamo come eliminare contenuti dagli elementi HTML.
Con il metodo empty(), possiamo eliminare tutti i figli e i discendenti di un elemento di destinazione.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();metodo remove()
metodo remove()
Il metodo remove() rimuove dal DOM non solo i discendenti dell'elemento, ma anche l'elemento stesso.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Congratulazioni
Congratulazioni 🎉
Abbiamo imparato a manipolare il DOM.
Nella prossima sezione impareremo a gestire gli stili con jQuery.
Domande Frequenti
La lezione «Manipolazione del DOM con jQuery - 2» è gratuita?
Sì — il testo completo di «Manipolazione del DOM con jQuery - 2» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 1 lezioni in totale.
Cosa imparerò in «Manipolazione del DOM con jQuery - 2»?
Manipolazione del DOM con jQuery - 2 Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Manipolazione del DOM con jQuery - 2»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.