jQuery instellen van inhoud en eigenschappen

Inhoud instellen - text(), html() en val()

We zullen de driezelfde methoden uit het vorige hoofdstuk gebruiken om de inhoud in te stellen:

  • text() - Stel in of retourneer de tekstinhoud van het geselecteerde element
  • html() - Stel in of retourneer de inhoud van het geselecteerde element (inclusief HTML-markeringen)
  • val() - Stel in of retourneer de waarde van het formulierveld

Hieronder wordt een voorbeeld gegeven van hoe je de inhoud kunt instellen met behulp van de methoden text(), html() en val():

Voorbeeld

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

Probeer het zelf

Callback-functies van text(), html() en val()

De drie jQuery-methoden: text(), html() en val() hebben ook callback-functies. De callback-functie wordt geleverd met twee parameters: de index van het huidige element in de geselecteerde elementenlijst, en de oorspronkelijke (oude) waarde. Vervolgens wordt de functie met de nieuwe waarde geretourneerd die u wilt gebruiken.

Het volgende voorbeeld demonstreert de text() en html() met een callback-functie:

Voorbeeld

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

Probeer het zelf

Eigenschap instellen - attr()

De jQuery attr() methode wordt ook gebruikt om eigenschapswaarden in te stellen of te wijzigen.

Het volgende voorbeeld demonstreert hoe je de waarde van de href-eigenschap van een link kunt wijzigen (instellen):

Voorbeeld

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

Probeer het zelf

De attr() methode staat ook toe om meerdere eigenschappen tegelijkertijd in te stellen.

Het volgende voorbeeld demonstreert hoe je zowel de href- als de title-eigenschappen kunt instellen:

Voorbeeld

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

Probeer het zelf

Callback-functie van attr()

De jQuery methode attr() biedt ook een callback-functie. De callback-functie ontvangt twee parameters: de index van het huidige element in de geselecteerde elementenlijst, en de oorspronkelijke (oude) waarde. Vervolgens retourneert de functie de te gebruiken string met de nieuwe waarde.

Het volgende voorbeeld demonstreert de attr() methode met een callback-functie:

Voorbeeld

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

Probeer het zelf

jQuery HTML referentiemanual

Voor het volledige overzicht van de jQuery HTML-methoden, raadpleeg het volgende referentiemanual: