Manipolazione del DOM con jQuery - 1
Manipolazione del DOM con jQuery
Manipolazione del DOM con jQuery - 1 è 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.
Introduzione ai metodi
Salve,
Finora abbiamo visto a cosa serve jQuery e come usare i selettori.
Ora vediamo i metodi che ci permettono di manipolare il DOM.
metodo text
metodo text()
Usiamo il metodo text() per accedere al contenuto di un elemento HTML.
Usate $ (selector).text() per leggere il contenuto di un elemento.
Inoltre, il metodo text viene usato per aggiornare il contenuto di un elemento. È sufficiente passare il nuovo contenuto al metodo text come argomento.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Domanda
metodo html
metodo html()
Il nostro prossimo metodo è html().
Come si può intuire dal nome, restituisce l'intero elemento anziché solo il contenuto dell'elemento scelto.
Definiamo di seguito un elemento HTML di esempio.
Sono stati definiti due elementi HTML con gli id base e target. Poi, non appena il DOM viene caricato.
Tutto il contenuto HTML dell'elemento base è stato copiato e aggiunto all'elemento con id target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Selettore degli attributi
metodo attr()
Usiamo gli attributi per definire comportamenti aggiuntivi degli elementi HTML.
Spesso, quando scriviamo codice JavaScript, potremmo voler accedere ai valori di questi attributi.
In questi casi si usa il metodo attr.
Impariamo a usare questo metodo con l'esempio seguente.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Attributo
Il processo di impostazione di nuovi attributi è simile a quello dei metodi text() e html() che abbiamo imparato in precedenza.
Passando un argomento al metodo attr() che usiamo per la lettura, possiamo definire un nuovo attributo per l'elemento di destinazione.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Abbiamo imparato ad aggiungere un attributo;
ora vediamo come eliminare un attributo esistente.
A questo scopo useremo il metodo removeAttr().
Osserviamo il nostro esempio.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));metodo val
metodo val()
I moduli sono indispensabili per le applicazioni web moderne. Useremo il metodo val() per leggere i dati inseriti dagli utenti negli elementi del modulo.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Attenzione
Nella lezione sulla gestione degli eventi impareremo ad ascoltare ogni dato inserito e a visualizzarlo nel nostro elemento span.
Informazioni aggiuntive
Per aggiornare il valore di un input, come si può intuire, passiamo degli argomenti al metodo val.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Congratulazioni
Congratulazioni 🎉
Abbiamo iniziato a imparare le manipolazioni del DOM
Nella prossima sezione continueremo a imparare le manipolazioni del DOM in jQuery.
Domande Frequenti
La lezione «Manipolazione del DOM con jQuery - 1» è gratuita?
Sì — il testo completo di «Manipolazione del DOM con jQuery - 1» è 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 - 1»?
Manipolazione del DOM con jQuery 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 - 1»?
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.