Heim  >  Artikel  >  Web-Frontend  >  So erhalten Sie den Attributwert eines Tags in JQuery

So erhalten Sie den Attributwert eines Tags in JQuery

PHPz
PHPzOriginal
2023-04-06 08:54:395283Durchsuche

In den letzten Jahren hat sich das Web-Frontend zu einer sehr beliebten Branche entwickelt, und jQuery wird als hervorragende JavaScript-Bibliothek in allen Aspekten der Web-Frontend-Entwicklung häufig verwendet. Bei der Verwendung von jQuery ist das Abrufen von Tag-Attributwerten eine Grundvoraussetzung. Schauen wir uns als Nächstes verschiedene Möglichkeiten an, wie jQuery den Wert eines Tag-Attributs ermitteln kann.

1. attr()-Methode

attr()-Methode ist eine gängige Methode in jQuery. Sie wird verwendet, um den Attributwert eines angegebenen Elements abzurufen oder festzulegen. Das Folgende ist die grundlegende Syntax der attr()-Methode:

$(selector).attr(attribute)

Dabei repräsentiert der Selektor das angegebene Element und das Attribut den abzurufenden oder festzulegenden Attributnamen. Wenn Sie den Wert eines Attributs eines angegebenen Elements erhalten möchten, können Sie den Attributnamen im Attributparameter übergeben. Wenn wir beispielsweise den Klassenattributwert eines bestimmten div-Elements erhalten möchten, können wir ihn wie folgt schreiben:

var className = $('div').attr('class');

Im obigen Code bedeutet $('div') die Auswahl aller div-Elemente und attr(' class‘) bedeutet, den Wert des Klassenattributs dieser Elemente abzurufen. Wenn Sie den Attributwert eines Elements festlegen möchten, müssen Sie den Attributnamen und den Attributwert im Attributparameter übergeben. Wenn wir beispielsweise den src-Attributwert eines img-Elements in newImg.png ändern möchten, können wir ihn wie folgt schreiben:

$('img').attr('src', 'newImg.png');

Wenn Sie die attr()-Methode verwenden, um den Tag-Attributwert zu erhalten, müssen Sie aufpassen zu den folgenden Punkten:

  • Wenn der Selektor Wenn mehrere übereinstimmende Elemente vorhanden sind, wird nur der Attributwert des ersten Elements zurückgegeben.
  • Wenn die Eigenschaft nicht existiert, geben Sie undefiniert zurück.
  • Wenn der Attributname falsch geschrieben ist, wird auch undefiniert zurückgegeben.

2. prop()-Methode

Die prop()-Methode ähnelt der attr()-Methode und wird auch verwendet, um den Attributwert des angegebenen Elements abzurufen oder festzulegen. Der Unterschied besteht darin, dass die prop()-Methode hauptsächlich zum Abrufen oder Festlegen einiger elementspezifischer Attribute verwendet wird, z. B. aktiviert, ausgewählt usw. Das Folgende ist die grundlegende Syntax der prop()-Methode:

$(selector).prop(property)

Dabei repräsentiert der Selektor das angegebene Element und die Eigenschaft den abzurufenden oder festzulegenden Attributnamen. Wenn Sie den Wert einer Eigenschaft eines angegebenen Elements abrufen möchten, können Sie den Eigenschaftsnamen im Eigenschaftsparameter übergeben. Wenn wir zum Beispiel den geprüften Attributwert eines Kontrollkästchenelements erhalten möchten, können wir es so schreiben:

var isChecked = $('input[type=checkbox]').prop('checked');

Im obigen Code bedeutet $('input[type=checkbox]') die Auswahl aller Kontrollkästchenelemente. prop('checked') Gibt an, dass der geprüfte Attributwert dieser Elemente abgerufen wird. Wenn Sie den Attributwert eines Elements festlegen möchten, müssen Sie den Attributnamen und den Attributwert im Eigenschaftsparameter übergeben. Wenn wir beispielsweise den geprüften Attributwert eines Kontrollkästchenelements auf „true“ setzen möchten, können wir das so schreiben:

$('input[type=checkbox]').prop('checked', true);

Wenn Sie die prop()-Methode verwenden, um den Label-Attributwert zu erhalten, müssen Sie darauf achten Folgende Punkte:

  • Wenn der Selektor übereinstimmt Wenn mehrere Elemente vorhanden sind, wird nur der Attributwert des ersten Elements zurückgegeben.
  • Wenn die Eigenschaft nicht existiert, geben Sie undefiniert zurück.
  • Wenn der Attributname falsch geschrieben ist, wird auch undefiniert zurückgegeben.

3. data()-Methode

data()-Methode ist eine weitere gängige Methode in jQuery, um den Wert des Label-Attributs abzurufen. Das Folgende ist die grundlegende Syntax der data()-Methode:

$(selector).data(key)

Dabei repräsentiert der Selektor das angegebene Element und der Schlüssel den Namen des abzurufenden benutzerdefinierten Datenattributs. Wenn wir beispielsweise den Wert des benutzerdefinierten Datenattributs data-id eines bestimmten div-Elements erhalten möchten, können wir ihn wie folgt schreiben:

<div data-id="123"></div>
var dataId = $('div').data('id');

Im obigen Code bedeutet $('div'), alle div auszuwählen Elemente, data('id') bedeutet, den Wert des benutzerdefinierten Datenattributs data-id dieser Elemente abzurufen. Wenn Sie ein benutzerdefiniertes Datenattribut eines Elements festlegen möchten, müssen Sie den Attributnamen und den Attributwert in der Methode data() übergeben. Wenn wir beispielsweise das benutzerdefinierte Datenattribut data-name eines div-Elements auf myName setzen möchten, können wir es so schreiben:

$('div').data('name', 'myName');

Wenn Sie die data()-Methode verwenden, um den Label-Attributwert zu erhalten, müssen Sie bezahlen Beachten Sie die folgenden Punkte:

  • Wenn mehrere Elemente mit dem Selektor übereinstimmen, wird nur der benutzerdefinierte Datenattributwert des ersten Elements zurückgegeben.
  • Wenn das benutzerdefinierte Datenattribut nicht vorhanden ist, wird undefiniert zurückgegeben.
  • Wenn der Name des benutzerdefinierten Datenattributs falsch geschrieben ist, wird auch undefiniert zurückgegeben.

Fazit

Die oben genannten sind mehrere gängige Methoden für jQuery, um Tag-Attributwerte zu erhalten. In der tatsächlichen Entwicklung können wir die geeignete Methode entsprechend den tatsächlichen Anforderungen auswählen. Es ist zu beachten, dass unterschiedliche Methoden für unterschiedliche Attributtypen geeignet sind und wir entsprechend der tatsächlichen Situation eine Auswahl treffen müssen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den Attributwert eines Tags in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn