jQuery's indstilling af indhold og egenskaber

Indholdssætning - text(), html() og val()

Vi bruger de tre samme metoder fra det forrige kapitel til at sætte indhold:

  • text() - Sæt eller returner tekstindholdet for det valgte element
  • html() - Sæt eller returner indholdet af det valgte element (inklusive HTML-mærker)
  • val() - Sæt eller returner værdien for et formularelement

Følgende eksempel viser, hvordan du kan sætte indhold ved hjælp af metoderne text(), html() og val():

Eksempel

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

Prøv det selv

Callback-funktioner for text(), html() og val()

De tre jQuery-metoder: text(), html() og val() har også callback-funktioner. Callback-funktionen modtager to parametre: indekset for det aktuelle element i den valgte elementliste, samt den oprindelige (gamle) værdi. Derefter returnerer funktionen den nye værdi, du ønsker at bruge som streng.

Følgende eksempel viser text() og html() med en callback-funktion:

Eksempel

$("#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 + ")";
  });
});

Prøv det selv

Sæt egenskab - attr()

jQuery attr() metoden bruges også til at sætte/ændre egenskabsværdier.

Følgende eksempel viser, hvordan man ændrer (sætter) værdien af href-attributten i et link:

Eksempel

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

Prøv det selv

attr() metoden tillader også at sætte flere egenskaber samtidig.

Følgende eksempel viser, hvordan man kan sætte href- og title-egenskaber samtidig:

Eksempel

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

Prøv det selv

attr() callback-funktion

jQuery metoden attr() tilbyder også en callback-funktion. Callback-funktionen modtager to parametre: indekset for det aktuelle element i den valgte elementliste, samt den oprindelige (gamle) værdi. Derefter returnerer funktionen den streng, du ønsker at bruge.

Følgende eksempel viser attr() metoden med en callback-funktion:

Eksempel

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

Prøv det selv

jQuery HTML referencehåndbog

For fuld information om jQuery HTML-metoder, besøg venligst følgende referencehåndbog: