Set Inhalt - text(), html() und val()
Wir werden die gleichen drei Methoden der vorherigen Seite verwenden , umInhalte zu setzen:
- text() - Legt fest oder gibt den Textinhalt der ausgewählten Elemente
- html() - Setzt oder gibt den Inhalt der ausgewählten Elemente (einschließlich HTML - Markup)
- val() - Setzt oder gibt den Wert von Formularfeldern
Das folgende Beispiel zeigt , wie der Inhalt mit dem jQuery zu setzen text(), html() und val() Methoden:
Beispiel
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
Versuch es selber " Ein Callback - Funktion für text(), html() und val()
Alle drei Methoden jQuery oben: text(), html() und val() , auch mit einer Callback - Funktion kommen. Die Callback-Funktion hat zwei Parameter: der Index des aktuellen Elements in der Liste der Elemente ausgewählt und die ursprüngliche (alte) Wert. Sie kehren dann die Zeichenfolge, die Sie als neuer Wert aus der Funktion nutzen zu können.
Das folgende Beispiel zeigt text() und html() mit einer Callback - Funktion:
Beispiel
$("#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 + ")";
});
});
Versuch es selber " Set Attribute - attr()
Das jQuery attr() Methode wird auch Attribut festlegen / ändern Werte verwendet.
Das folgende Beispiel zeigt , wie (set) zu ändern , den Wert des href - Attribut in einem Link:
Beispiel
$("button").click(function(){
$("#w3s").attr("href", "http://www.w3ii.com/jquery");
});
Versuch es selber " Die attr() Methode ermöglicht es Ihnen auch mehrere Attribute gleichzeitig zu setzen.
Das folgende Beispiel zeigt , wie sowohl die festlegen href und Titel zugleich Attribute:
Beispiel
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3ii.com/jquery",
"title" : "w3ii jQuery Tutorial"
});
});
Versuch es selber " Ein Callback - Funktion für attr()
Die jQuery - Methode attr() , auch mit einer Callback - Funktion. Die Callback-Funktion hat zwei Parameter: der Index des aktuellen Elements in der Liste der Elemente ausgewählt und die ursprüngliche (alte) Wert zuschreiben. Sie kehren dann die Zeichenfolge, die Sie als neuer Attributwert aus der Funktion nutzen zu können.
Das folgende Beispiel zeigt attr() mit einer Callback - Funktion:
Beispiel
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
jQuery HTML Referenz
Eine vollständige Übersicht über alle Methoden jQuery HTML, gehen Sie bitte auf unsere jQuery HTML / CSS Referenz .