jquery ändert den Dom-Wert

Im Prozess der Webentwicklung müssen wir normalerweise DOM-Elemente hinzufügen, löschen, ändern und überprüfen. Unter diesen ist das Ändern des Werts von DOM-Elementen ein häufiger Vorgang. jQuery, eine beliebte JavaScript-Bibliothek, bietet eine umfangreiche API zum Ändern des Werts von DOM-Elementen.

In diesem Artikel wird vorgestellt, wie jQuery DOM-Werte ändert, einschließlich des Abrufens des Werts eines Elements, des Änderns des Werts eines Elements und des Bedienens mehrerer Elemente durch Kettenaufrufe.

Den Wert des Elements abrufen

In jQuery können wir das DOM-Element über den Selektor abrufen und dann den Wert des Elements über die API abrufen. Im Folgenden sind einige gängige APIs zum Abrufen von Elementwerten aufgeführt:

1. val(): Ruft den Wert eines Eingabe-, Auswahl- oder Textbereichselements ab.

Zum Beispiel den Wert eines Textfelds abrufen:

var value = $('#input-id').val();

2. text(): Ruft den Textinhalt des Elements ab.

Zum Beispiel den Textinhalt eines p-Elements abrufen:

var text = $('p').text();

3. html(): Den HTML-Inhalt des Elements abrufen.

Zum Beispiel den HTML-Inhalt eines div-Elements abrufen:

var html = $('div').html();

4. attr(): Ruft den Attributwert des Elements ab.

Um beispielsweise das src-Attribut eines img-Elements abzurufen:

var src = $('img').attr('src');

Die obige API kann auch eine Funktion als Parameter akzeptieren, um den Wert anzupassen das Element. Zum Beispiel:

var value = $('input').val(function(index, value) {
  return value.toUpperCase();
});

Wenn Sie die Werte mehrerer Elemente abrufen, können Sie die Funktion every() verwenden, um die Elemente zu durchlaufen und ihre Werte abzurufen. Rufen Sie beispielsweise den Wert aller Textfelder ab:

$('input[type="text"]').each(function() {
  console.log($(this).val());
});

Ändern Sie den Wert des Elements

Das Abrufen des Werts des Elements ist nur ein Teil des Vorgangs zum Ändern des DOM Die üblichere Möglichkeit besteht darin, den DOM-Wert zu ändern. Im Folgenden sind einige gängige APIs zum Ändern von DOM-Elementen aufgeführt:

1. val(): Legt den Wert eines Eingabe-, Auswahl- oder Textbereichselements fest.

Setzen Sie beispielsweise den Wert eines Textfelds auf „Hallo“:

$('#input-id').val('hello');

2. text(): Legen Sie den Textinhalt des fest Element.

So setzen Sie beispielsweise den Textinhalt eines p-Elements auf „world“:

$('p').text('world');

3. html(): Legen Sie den HTML-Inhalt von fest das Element.

Setzen Sie beispielsweise den HTML-Inhalt eines div-Elements auf „

title

“:

$('div').html('<h1>title</h1>');

4. attr ( ): Legen Sie den Attributwert des Elements fest.

Setzen Sie beispielsweise das src-Attribut eines img-Elements auf „image.jpg“:

$('img').attr('src', 'image.jpg');

Operation auf mehreren Elementen

#🎜 🎜 #Jetzt haben wir gelernt, wie man den Wert eines einzelnen DOM-Elements erhält und ändert. Aber oft müssen wir die gleichen oder unterschiedliche Operationen an mehreren Elementen ausführen. jQuery bietet verkettete Aufrufe und Filter für die Bearbeitung mehrerer Elemente.

Verkettete Aufrufe verwenden

Die verketteten Aufrufe von jQuery ermöglichen es uns, mehrere Elemente in einer Anweisung zu bearbeiten. Ändern Sie beispielsweise die Hintergrundfarbe aller h1-Elemente in Rot:

$('h1').css('background-color', 'red');

Setzen Sie den Wert aller Textfelder auf leer:

$('input[type="text"]').val('');

Ändern Sie mehrere Attribute gleichzeitig: #🎜🎜 #

$('img').attr({
  'src': 'image.jpg',
  'alt': 'image'
});

Filter verwenden

Ein Filter ist ein leistungsstarker Selektor von jQuery, der eine Teilmenge einer Menge von Elementen auswählen kann. Wählen Sie beispielsweise alle Elemente mit der Klasse „aktiv“ aus:

$('.active')

Wählen Sie das erste p-Element aus:

$('p:first')

Wählen Sie die ersten drei div-Elemente aus:

$('div:lt(3)')

# 🎜 🎜#Sie können Filter in Verbindung mit der API verwenden, um ausgewählte Elemente zu bearbeiten. Setzen Sie beispielsweise den Wert des Textfelds mit der Klasse „Hervorheben“ auf leer:

$('input.highlight:text').val('');

Die obigen Beispiele zeigen verschiedene Filterverwendungen. Indem Sie sich mit der Verwendung von Filtern vertraut machen, können Sie flexibel die erforderlichen auswählen Operationen. Elemente.

Zusammenfassung

Durch die Einführung dieses Artikels haben wir gelernt, wie jQuery den Wert von DOM-Elementen erhält und ändert und wie mehrere Elemente durch Kettenaufrufe und Filter implementiert werden. arbeiten. Diese Techniken ermöglichen es uns, DOM-Elemente schneller zu betreiben und die Entwicklungseffizienz zu verbessern. Gleichzeitig kann das Erlernen der Bedienung von jQuery auch den Grundstein für das Erlernen anderer JavaScript-Bibliotheken und Frameworks legen.

Das obige ist der detaillierte Inhalt vonjquery ändert den Dom-Wert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!