jQuery - Imposta contenuto e attributi
Imposta contenuto - text(), html() e val()
Utilizzeremo gli stessi tre metodi della pagina precedente per impostare il contenuto :
text()
- Imposta o restituisce il contenuto del testo degli elementi selezionatihtml()
- Imposta o restituisce il contenuto degli elementi selezionati (incluso il markup HTML)val()
- Imposta o restituisce il valore dei campi del modulo
L'esempio seguente mostra come impostare il contenuto con i metodi jQuery text()
, html()
e :val()
Esempio
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Una funzione di callback per text(), html() e val()
Tutti e tre i metodi jQuery sopra: text()
, html()
e val()
, sono anche dotati di una funzione di callback. La funzione di callback ha due parametri: l'indice dell'elemento corrente nell'elenco degli elementi selezionati e il valore originale (vecchio). Quindi restituisci la stringa che desideri utilizzare come nuovo valore dalla funzione.
L'esempio seguente mostra text()
e html()
con una funzione di callback:
Esempio
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Imposta attributi - attr()
Il metodo jQuery attr()
viene utilizzato anche per impostare/modificare i valori degli attributi.
L'esempio seguente mostra come modificare (impostare) il valore dell'attributo href in un collegamento:
Esempio
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Il attr()
metodo consente inoltre di impostare più attributi contemporaneamente.
L'esempio seguente mostra come impostare contemporaneamente gli attributi href e title:
Esempio
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Una funzione di callback per attr()
Il metodo jQuery attr()
, inoltre, viene fornito con una funzione di callback. La funzione di callback ha due parametri: l'indice dell'elemento corrente nell'elenco degli elementi selezionati e il valore dell'attributo originale (vecchio). Quindi restituisci la stringa che desideri utilizzare come nuovo valore di attributo dalla funzione.
L'esempio seguente mostra attr()
con una funzione di callback:
Esempio
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Esercizi jQuery
Riferimento HTML jQuery
Per una panoramica completa di tutti i metodi HTML jQuery, vai al nostro Riferimento HTML/CSS jQuery .