JQuery per aspiranti programmatori: B – attributi e modifica di contenuti

Dopo aver approcciato JQuery nella parte A all’ indirizzo https://umbriawayamplifica.wordpress.com/2018/12/10/jquery-per-aspiranti-programmatori-a-overview/ con una approfondita overview, passiamo ora ad affrontare la spinosa questione dei contenuti HTML. Possiamo manipolare facilmente gli attributi assegnati agli elementi HTML tramite jQuery. href, src, id, class, style sono tutti esempi di attributi HTML. Il metodo attr () è usato per ottenere il valore di un attributo. Per esempio:

<code>
<a href=”www.farwebdesign.com”>
Click here
</a>
</code>

JAVASCRIPT:
<code>
$(function() {
var val = $(“a”).attr(“href”);
alert(val);
});
// alerts “www.farwebdesign.com”
</code>

Nel codice sopra abbiamo selezionato e allertato il valore dell’attributo href dell’elemento <a>.

Il metodo attr () ci consente anche di impostare un valore per un attributo specificandolo come secondo parametro. Per esempio:

<code>
$(function() {
$(“a”).attr(“href”, “http://www.jquery.com&#8221;);
});
</code>

Questo cambierà l’attributo href dell’elemento <a> al valore fornito.

Puoi anche rimuovere gli attributi dagli elementi HTML. Il metodo removeAttr () viene utilizzato per rimuovere qualsiasi attributo di un elemento. Nell’esempio seguente rimuoviamo gli attributi border e class della tabella:

<code>
$(“table”).removeAttr(“border”);
$(“table”).removeAttr(“class”);
</code>

Esistono diversi metodi per manipolare il contenuto di elementi HTML tramite jQuery. Il metodo html () viene utilizzato per ottenere il contenuto dell’elemento selezionato, incluso il markup HTML. Per esempio:

<code>
<p>
JQuery is <b>fun</b>
</p>
</code>

JAVASCRIPT

<code>
$(function() {
var val = $(“p”).html();
alert(val);
});
// alerts “JQuery is <b>fun</b>”
</code>

Si noti che viene restituito anche il markup HTML (i tag <b>). Se è necessario solo il contenuto del testo, senza il markup HTML, è possibile utilizzare il metodo text ():

<code>
$(function() {
var val = $(“p”).text();
alert(val);
});
// alerts “JQuery is fun”
</code>

I metodi html () e text () possono essere utilizzati per tutti gli elementi HTML che possono contenere contenuto. Gli stessi metodi html () e text () possono essere usati per modificare il contenuto degli elementi HTML. Il contenuto da impostare viene fornito come parametro del metodo, ad esempio i codici html e javascript saranno:

<code>


some text



</code>

<code>
$(function() {
$(“#test”).text(“hello!”);
});
</code>

Il codice sopra cambia il contenuto dell’elemento con id = “test” su “ciao!”. Se il contenuto che stai impostando contiene markup HTML, dovresti usare il metodo html () invece di text ().

Abbiamo visto come possiamo manipolare il contenuto degli elementi HTML usando i metodi text () e html (). Un altro metodo utile è il metodo val (), che ci consente di ottenere e impostare i valori dei campi modulo, quali caselle di testo, menu a discesa e input simili. Per esempio:

<code>
<input type=”text” id=”name” value=”Your Name”>
</code>

<code>
$(function() {
alert($(“#name”).val());
});
//alerts “Your Name”
</code>

Allo stesso modo, è possibile impostare il valore per il campo fornendolo come parametro per il metodo val (). Ottenere e impostare i valori dei campi del modulo è molto utile quando è necessario gestire gli eventi del modulo e la convalida. Tratteremo gli eventi più avanti.

I seguenti metodi jQuery sono disponibili per ottenere e impostare il contenuto e gli attributi degli elementi HTML selezionati:

text () imposta o restituisce il contenuto del testo degli elementi selezionati.
html () imposta o restituisce il contenuto degli elementi selezionati (incluso il markup HTML).
val () imposta o restituisce il valore dei campi modulo.
attr () imposta o restituisce il valore degli attributi.
removeAttr () rimuove l’attributo specificato.

Come abbiamo visto nelle lezioni precedenti, i metodi html () e text () possono essere usati per ottenere e impostare il contenuto di un elemento selezionato. Tuttavia, quando questi metodi vengono utilizzati per impostare il contenuto, il contenuto esistente viene perso. jQuery ha metodi che vengono utilizzati per aggiungere nuovi contenuti a un elemento selezionato senza eliminare il contenuto esistente:

append () inserisce il contenuto alla fine degli elementi selezionati.
prepend () inserisce il contenuto all’inizio degli elementi selezionati.
after () inserisce il contenuto dopo gli elementi selezionati.
before () inserisce il contenuto prima degli elementi selezionati.

Il metodo append () inserisce il contenuto alla fine dell’elemento HTML selezionato. Per esempio:

<code>
<p id=”demo”>Hi </p>
</code>

<code>
$(function() {
$(“#demo”).append(“David”);
});
//Outputs “Hi David”
</code>

Allo stesso modo, il metodo prepend () inserisce il contenuto ALL’INIZIO dell’elemento selezionato. Puoi anche utilizzare il markup HTML per il contenuto.

I metodi jQuery after () e before () inseriscono il contenuto AFTER e PRIMA dell’elemento HTML selezionato.
Per esempio:

<code>
<p id=”demo”>Hi</p>
</code>

<code>
$(function() {
$(“#demo”).before(“<i>Some Title</i>”);
$(“#demo”).after(“<b>Welcome</b>”);
});
</code>

I metodi append (), prepend (), before () e after () possono anche essere usati per aggiungere elementi appena creati. Il modo più semplice per creare un nuovo elemento HTML con jQuery è il seguente:

<code>
var txt = $(“<p></p>”).text(“Hi”);
</code>

Il codice sopra crea un nuovo elemento <p>, che contiene il testo Hi e lo assegna a una variabile chiamata txt. Ora, possiamo usare quella variabile come parametro dei metodi sopra menzionati per aggiungerla al nostro HTML, ad esempio:

<code>
<p id=”demo”>Hello</p>
</code>

<code>
$(function() {
var txt = $(“<p></p>”).text(“Hi”);
$(“#demo”).after(txt);
});
</code>

Questo inserirà l’elemento <p> appena creato dopo il paragrafo #demo. Puoi anche specificare più elementi come argomenti per i metodi before (), after (), append (), prepend () separandoli usando le virgole: $ (“# demo”). Append (var1, var2, var3). La sintassi di cui sopra per la creazione di elementi può essere utilizzata per creare qualsiasi nuovo elemento HTML, ad esempio $ (“<div> </ div>”) crea un nuovo div.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Blog su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: