Gli ultimi tutorial di sviluppo web
 

jQuery - Set Contenuto e attributi


Set Contenuto - text(), html() , e val()

Useremo gli stessi tre metodi dalla pagina precedente perimpostare il contenuto:

  • text() - Imposta o restituisce il contenuto del testo degli elementi selezionati
  • html() - imposta o restituisce il contenuto degli elementi selezionati (compreso il codice HTML)
  • val() - imposta o restituisce il valore dei campi modulo

L'esempio seguente mostra come impostare il contenuto con il jQuery text(), html() , e val() metodi:

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 tu stesso "

Una funzione di callback per text(), html() , e val()

Tutti i tre metodi di jQuery sopra: text(), html() , e val() , anche venire con una funzione di callback. La funzione di callback ha due parametri: l'indice dell'elemento corrente nella lista di elementi selezionati e il valore originale (vecchia). Quindi si ritorna la stringa che si desidera 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 + ")";
    });
});
Prova tu stesso "

Impostare gli attributi - attr()

Il jQuery attr() il metodo è utilizzato anche per impostare / modificare i valori degli attributi.

L'esempio seguente mostra come modificare (set) il valore del href attributo in un link:

Esempio

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

Il attr() metodo consente anche di impostare più attributi allo stesso tempo.

L'esempio seguente mostra come impostare sia il href e il titolo attributi allo stesso tempo:

Esempio

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

Una funzione di callback per attr()

Il metodo di jQuery attr() , vengono anche con una funzione di callback. La funzione di callback ha due parametri: l'indice dell'elemento corrente nella lista degli elementi selezionati e l'originale (vecchio) valore di attributo. Quindi si ritorna la stringa che si desidera 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";
    });
});
Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »


jQuery HTML Reference

Per una panoramica completa di tutti i metodi di jQuery HTML, si prega di visitare il nostro / CSS di riferimento jQuery HTML .