jQuery - Nastavení obsahu a atributů
Nastavit obsah – text(), html() a val()
K nastavení obsahu použijeme tři stejné metody z předchozí stránky :
text()- Nastaví nebo vrátí textový obsah vybraných prvkůhtml()- Nastaví nebo vrátí obsah vybraných prvků (včetně značek HTML)val()- Nastavuje nebo vrací hodnotu polí formuláře
Následující příklad ukazuje, jak nastavit obsah pomocí metod jQuery text(), html()a :val()
Příklad
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Funkce zpětného volání pro text(), html() a val()
Všechny tři výše uvedené metody jQuery: text(), html(), a val(), také přicházejí s funkcí zpětného volání. Funkce zpětného volání má dva parametry: index aktuálního prvku v seznamu vybraných prvků a původní (starou) hodnotu. Potom vrátíte řetězec, který chcete použít jako novou hodnotu z funkce.
Následující příklad ukazuje text()a html()s funkcí zpětného volání:
Příklad
$("#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 + ")";
});
});
Nastavit atributy - attr()
Metoda jQuery attr()se také používá k nastavení/změně hodnot atributů.
Následující příklad ukazuje, jak změnit (nastavit) hodnotu atributu href v odkazu:
Příklad
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Metoda attr()také umožňuje nastavit více atributů současně.
Následující příklad ukazuje, jak nastavit atributy href a title současně:
Příklad
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
Funkce zpětného volání pro attr()
Metoda jQuery attr()také přichází s funkcí zpětného volání. Funkce zpětného volání má dva parametry: index aktuálního prvku v seznamu vybraných prvků a původní (starou) hodnotu atributu. Potom vrátíte řetězec, který chcete použít jako novou hodnotu atributu z funkce.
Následující příklad ukazuje attr()funkci zpětného volání:
Příklad
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Cvičení jQuery
HTML reference jQuery
Úplný přehled všech metod jQuery HTML naleznete v naší jQuery HTML/CSS Reference .