jQuery imposta contenuti e attributi

Imposta contenuto - text(), html() e val()

Utilizzeremo i tre stessi metodi del capitolo precedente per impostare il contenuto:

  • text() - Imposta o restituisce il contenuto testuale dell'elemento selezionato
  • html() - Imposta o restituisce il contenuto dell'elemento selezionato (inclusi i tag HTML)
  • val() - Imposta o restituisce il valore del campo del modulo

Esempio seguente dimostra come impostare il contenuto utilizzando i metodi 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");
});

Prova te stesso

Funzione di callback di text(), html() e val()

Le tre metodi jQuery: text(), html() e val() hanno anche funzioni di callback. Le funzioni di callback accettano due parametri: l'indice dell'elemento corrente nella lista di elementi selezionati e il valore originale (vecchio). Poi restituisce il valore di nuova funzione che desideri utilizzare come stringa.

L'esempio seguente dimostra come utilizzare i metodi 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 + ")";
  });
});

Prova te stesso

Impostare attributi - attr()

Il metodo attr() di jQuery viene utilizzato anche per impostare o modificare i valori degli attributi.

L'esempio seguente dimostra come modificare (impostare) il valore dell'attributo href di un link:

Esempio

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Prova te stesso

Il metodo attr() ti permette anche di impostare più proprietà contemporaneamente.

L'esempio seguente dimostra come impostare contemporaneamente le proprietà href e title:

Esempio

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com Tutorial jQuery"
  });
});

Prova te stesso

Callback di attr()

Il metodo attr() di jQuery offre anche una funzione di callback. La funzione di callback accetta due parametri: l'indice dell'elemento corrente nella lista di elementi selezionati e il valore originale (vecchio). Poi restituisce la stringa che desideri utilizzare come nuovo valore.

L'esempio seguente dimostra come utilizzare il metodo attr() con una funzione di callback:

Esempio

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

Prova te stesso

Manuale di riferimento jQuery HTML

Per una descrizione completa dei metodi HTML di jQuery, visitare il seguente manuale di riferimento: