jQuery ustawianie zawartości i atrybutów

Ustawianie zawartości - text(), html() oraz val()

Użyjemy trzech tych samych metod z poprzedniego rozdziału do ustawiania zawartości:

  • text() - ustawia lub zwraca tekst zawartości wybranego elementu
  • html() - ustawia lub zwraca zawartość wybranego elementu (w tym znaczniki HTML)
  • val() - ustawia lub zwraca wartość pola formularza

Poniższy przykład pokazuje, jak ustawiać zawartość za pomocą metod text(), html() oraz val():

Przykład

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

Spróbuj sam

Funkcje zwrotne text(), html() oraz val()

Trzy metody jQuery: text(), html() oraz val(), mają również funkcje zwrotne. Funkcje zwrotne mają dwa parametry: indeks elementu bieżącego w liście wybranych elementów oraz oryginalna (stara) wartość. Następnie zwracają funkcję nowej wartości, którą chcesz użyć.

Poniższy przykład pokazuje funkcje zwrotne text() i html() z funkcją zwrotną:

Przykład

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    zwróć "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    zwróć "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Spróbuj sam

Ustawienie atrybutu - attr()

Metoda attr() jQuery również służy do ustawiania/zmiany wartości atrybutów.

Poniższy przykład pokazuje, jak zmienić (ustawić) wartość atrybutu href w linku:

Przykład

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

Spróbuj sam

Metoda attr() pozwala również na jednoczesne ustawienie wielu atrybutów.

Poniższy przykład pokazuje, jak jednocześnie ustawić atrybuty href i title:

Przykład

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

Spróbuj sam

Funkcja zwrotna attr()

Metoda attr() jQuery również oferuje funkcję zwrotną. Funkcja zwrotna ma dwa parametry: indeks bieżącego elementu w liście wybranych elementów oraz oryginalną (stary) wartość. Następnie zwraca nową wartość stringa, którą chcesz użyć.

Poniższy przykład pokazuje metodę attr() z funkcją zwrotną:

Przykład

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

Spróbuj sam

Podręcznik referencyjny jQuery HTML

Aby uzyskać pełne informacje o metodach HTML jQuery, odwiedź poniższy podręcznik: