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 selezionati
  • html()- 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

Mettiti alla prova con gli esercizi

Esercizio:

Usa un metodo jQuery per cambiare il testo di un elemento <div> in "Hello World".

$("div").("");


Riferimento HTML jQuery

Per una panoramica completa di tutti i metodi HTML jQuery, vai al nostro Riferimento HTML/CSS jQuery .