jQuery - Ustaw zawartość i atrybuty
Ustaw zawartość — text(), html() i val()
Użyjemy tych samych trzech metod z poprzedniej strony, aby ustawić zawartość :
text()- Ustawia lub zwraca zawartość tekstową wybranych elementówhtml()- Ustawia lub zwraca zawartość wybranych elementów (w tym znaczniki HTML)val()- Ustawia lub zwraca wartość pól formularza
Poniższy przykład pokazuje, jak ustawić zawartość za pomocą metod jQuery text(), html()i :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");
});
Funkcja wywołania zwrotnego dla text(), html() i val()
Wszystkie trzy powyższe metody jQuery: text(), html()i val(), są również wyposażone w funkcję zwrotną. Funkcja callback ma dwa parametry: indeks bieżącego elementu na liście wybranych elementów oraz oryginalną (starą) wartość. Następnie zwracasz ciąg, którego chcesz użyć jako nowej wartości z funkcji.
Poniższy przykład ilustruje text()funkcję html()zwrotną:
Przykład
$("#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 + ")";
});
});
Ustaw atrybuty - attr()
Metoda jQuery attr()służy również do ustawiania/zmiany wartości atrybutów.
Poniższy przykład pokazuje, jak zmienić (ustawić) wartość atrybutu href w łączu:
Przykład
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Metoda attr()pozwala również na ustawienie wielu atrybutów jednocześnie.
Poniższy przykład pokazuje, jak ustawić jednocześnie atrybuty href i title:
Przykład
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Funkcja wywołania zwrotnego dla attr()
Metoda jQuery attr()zawiera również funkcję zwrotną. Funkcja callback ma dwa parametry: indeks bieżącego elementu na liście wybranych elementów oraz oryginalną (starą) wartość atrybutu. Następnie zwracasz ciąg, którego chcesz użyć jako nowej wartości atrybutu z funkcji.
Poniższy przykład ilustruje attr()funkcję wywołania zwrotnego:
Przykład
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Ćwiczenia z jQuery
Dokumentacja HTML jQuery
Aby uzyskać pełny przegląd wszystkich metod jQuery HTML, przejdź do naszego jQuery HTML/CSS Reference .