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

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

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

$('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)')

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

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!