jQuery-sätt och egenskaper

Sätt innehåll - text(), html() och val()

Vi kommer att använda de tre samma metoderna från föregående kapitel för att sätta innehåll:

  • text() - Sätt eller returnera textinnehållet för det valda elementet
  • html() - Sätt eller returnera innehållet för det valda elementet (inklusive HTML-märken)
  • val() - Sätt eller returnera värdet för ett formulärfield

Följande exempel visar hur du kan sätta innehåll med hjälp av metoderna text(), html() och val():

Exempel

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Prova själv

Callback-funktioner för text(), html() och val()

De tre jQuery-metoderna: text(), html() och val() har också callback-funktioner. Callback-funktionen tar två parametrar: indexet för den aktuella elementet i den valda elementlistan och den ursprungliga (gamla) värdet. Därefter returnerar funktionen det nya värdet som du vill använda som sträng.

Följande exempel visar hur text() och html() med callback-funktion används:

Exempel

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Gamla text: " + origText + " Ny text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Gamla html: " + origText + " Ny html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Prova själv

Ställ in egenskap - attr()

Metoden attr() i jQuery används också för att ställa in eller ändra egenskapsvärden.

Följande exempel visar hur du ändrar (ställer in) värdet för href-egenskapen i en länk:

Exempel

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

Prova själv

Metoden attr() tillåter också att flera egenskaper ställs in samtidigt.

Följande exempel visar hur du kan ställa in både href- och title-egenskapen samtidigt:

Exempel

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

Prova själv

Callback-funktion för attr()

Metoden attr() i jQuery erbjuder också callback-funktioner. Callback-funktionen tar två parametrar: index för det aktuella elementet i den valda elementlistan och den ursprungliga (gamla) värdet. Därefter returnerar funktionen den sträng du vill använda som nytt värde.

Följande exempel visar hur metoden attr() med callback-funktion används:

Exempel

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

Prova själv

jQuery HTML-referenshandbok

För fullständig information om jQuery HTML-metoder, besök följande referenshandbok: