Neueste Web-Entwicklung Tutorials
 

jQuery - Holen Sie Inhalt und Attribute


jQuery enthält leistungsfähige Methoden zum Ändern und Bearbeiten von HTML-Elementen und Attributen.


jQuery DOM-Manipulation

Ein sehr wichtiger Teil von jQuery ist die Möglichkeit, das DOM zu manipulieren.

jQuery kommt mit einem Bündel von DOM im Zusammenhang mit Methoden, die es leicht machen, für den Zugriff auf und die Elemente und Attribute zu manipulieren.

DOM = Document Object Model

Der DOM definiert einen Standard für Dokumente HTML und XML-Zugriff auf:

"Das W3C Document Object Model (DOM) ist eine Plattform und sprachneutrale Schnittstelle,die dynamisch Programmen und Skripten ermöglicht den Zugriffaufund den Inhalt, Struktur und Stil eines Dokumentszuaktualisieren."


Get Inhalt - text(), html() und val()

Drei einfache, aber nützliche jQuery Methoden zur DOM-Manipulation sind:

  • 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 mit dem jQuery Inhalt zu erhalten text() und html() Methoden:

Beispiel

$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});
Versuch es selber "

Das folgende Beispiel zeigt , wie mit dem jQuery den Wert eines Eingabefeldes zu erhalten val() Methode:

Beispiel

$("#btn1").click(function(){
    alert("Value: " + $("#test").val());
});
Versuch es selber "

Get Attribute - attr()

Das jQuery attr() Methode wird verwendet , Attributwerte zu erhalten.

Das folgende Beispiel zeigt , wie der Wert des zu bekommen href Attribut in einem Link:

Beispiel

$("button").click(function(){
    alert($("#w3s").attr("href"));
});
Versuch es selber "

Das nächste Kapitel wird erläutert, wie (ändern) einstellen Inhalt und Attributwerte.


Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4»


jQuery HTML Referenz

Eine vollständige Übersicht über alle Methoden jQuery HTML, gehen Sie bitte auf unsere jQuery HTML / CSS Referenz .