JavaScript: Nutzen Sie HTML5-Datenattribute für maximale Effizienz

In diesem Artikel besprechen wir, wie man HTML5-Datenattribute mithilfe von JavaScript erhält. Wir gehen einige praktische Beispiele durch, um zu demonstrieren, wie diese Dateneigenschaften mit einfachem JavaScript und jQuery verwendet werden.

JavaScript ist eine der Kerntechnologien des Internets. Es wird von den meisten Websites verwendet und von allen modernen Webbrowsern unterstützt, ohne dass Plugins erforderlich sind. In dieser Serie besprechen wir Tipps und Tricks, die Sie bei Ihrer täglichen JavaScript-Entwicklung unterstützen.

Oft müssen Sie einige zusätzliche Informationen zusammen mit verschiedenen HTML-Elementen in Ihrer Webanwendung oder Website speichern. Für den Benutzer bedeutet das vielleicht nichts, aber es kann für Sie hilfreich sein, wenn Sie auf der Grundlage dieser Informationen handeln möchten.

Wenn Sie beispielsweise eine HTML-Tabelle haben, die Zeilen aus einer Datenbank enthält, möchten Sie möglicherweise für jede Zeile die entsprechende Datenbank-ID speichern. Dies erleichtert die Bearbeitung und andere Aufgaben. Dies ist eine großartige Verwendung für benutzerdefinierte Datenattribute.

Vor der Einführung dieser benutzerdefinierten Datenattribute verwendeten Entwickler oft Klassenattribute zum Speichern solcher Informationen, aber Klassenattribute werden eigentlich nicht für diesen Zweck verwendet, und diese Vorgehensweise kann zu Verwirrung beim Verständnis des Codes und des Site-Markups führen.

Mit der Einführung benutzerdefinierter HTML5-Datenattribute ist das Speichern und Abrufen benutzerdefinierter Daten in HTML sehr einfach geworden.

Zugriff auf Datenattribute mit Vanilla JavaScript

In diesem Abschnitt besprechen wir verschiedene Möglichkeiten, HTML5-Datenattribute mithilfe von einfachem JavaScript abzurufen.

HTMLElement.dataset Eigenschaften

dataset Attribute ermöglichen Ihnen den einfachen Zugriff auf die Dateneigenschaften eines Elements.

Betrachten wir das folgende Beispiel.

Zuerst verknüpfen wir die Datenattribute mit jedem <li> 元素上定义了 data-employee-id 自定义数据属性，用于存储员工 ID。如果需要的话，稍后可以使用它来获取员工的更多详细信息。接下来，我们在每个 <li> 元素上定义了 onclick 事件处理程序，因此当您单击任何行时，它将调用 getEmpId 函数，该函数最终获取 employee 的值 - id 与相应 <li> Element.

In der Funktion getEmpId verwenden wir das Attribut getEmpId 函数中，我们使用了 <li> 元素的 dataset 属性，该属性作为第一个参数传递。 dataset 属性返回 DOMStringMap des Elements <li>, das als erster Parameter übergeben wird.

Die Eigenschaft gibt ein DOMStringMap-Objekt zurück, mit dem Sie einzelne Eigenschaften abrufen können.

dataset 属性获取各个属性时，有一些重要的事情。 data- 前缀已从属性名称中删除。任何后跟连字符的小写字符都会转换为大写字符，并删除连字符。换句话说， dash-style 属性名称将转换为 camelCaseEs gibt ein paar wichtige Dinge, wenn Sie das Attribut

verwenden, um einzelne Eigenschaften zu erhalten. Das Präfix data- wurde aus Eigenschaftsnamen entfernt. Alle Kleinbuchstaben, denen ein Bindestrich folgt, werden in Großbuchstaben umgewandelt und der Bindestrich wird entfernt. Mit anderen Worten: Eigenschaftsnamen im Dash-Stil werden in Objektschlüssel vom Typ camelCase konvertiert. Andere Rollen bleiben unverändert.

data-employee-id 属性将转换为 employeeId。因此，您可以使用 element.dataset.employeeId 来获取 data-employee-idIn unserem Beispiel wird unter Verwendung dieser Regeln

der Wert des Attributs bestimmt.

datasetSo funktioniert

in Vanilla-JavaScript richtig.

getAttribute()

Methode

getAttributeIn diesem Abschnitt besprechen wir, wie man den Wert eines Datenattributs mithilfe der

-Methode ermittelt.

Wir werden das im vorherigen Abschnitt besprochene Beispiel modifizieren.

getAttribute 方法获取自定义数据属性非常简单。您只需传递整个属性名称以及 data-Wie Sie sehen, ist das Abrufen eines benutzerdefinierten Datenattributs mit der

-Methode eines HTML-Elements sehr einfach. Sie übergeben einfach den gesamten Eigenschaftsnamen zusammen mit dem Präfix data-, um den Wert der Eigenschaft zu erhalten.

Zugriff auf Dateneigenschaften mithilfe der jQuery-Bibliothek

In diesem Abschnitt besprechen wir, wie man HTML5-Datenattribute mithilfe der jQuery-Bibliothek erhält.

data()

Methode

Mit den Methoden von datajQuery

können Sie die Datenattribute eines Elements einfach abrufen.

Lassen Sie uns anhand des folgenden Beispiels verstehen, wie jQuery-Datenmethoden funktionieren.

Wie Sie sehen, müssen wir lediglich die CamelCase-Version des Datenattributnamens übergeben, um seinen Wert zu erhalten.

attr()

Methode

attrIn jQuery können Sie auch die Methode

verwenden, um den Wert eines bestimmten Attributs eines Elements abzurufen. 🎜

Werfen wir einen kurzen Blick auf die Verwendung der attr-Methode in jQuery.

…
…
var empId = $(element).attr('data-employee-id');
…
…

Wie Sie sehen können, funktioniert die attr 方法的工作方式与普通 JavaScript 中的 getAttribute-Methode genauso wie die getAttribute-Methode in normalem JavaScript.

In jQuery besteht der Unterschied zwischen den Methoden data und data 和 attr 方法的区别在于 data darin, dass die Methode data intern die aus dem Datenattribut erhaltene Zeichenfolge in den entsprechenden Typ konvertiert, z. B. Zahlen oder Boolean Werte usw.

So erhalten Sie ganz einfach Datenattribute mit jQuery.

Fazit

Heute haben wir besprochen, wie man HTML5-Datenattribute mithilfe von JavaScript erhält. Anhand mehrerer praktischer Beispiele haben Sie gelernt, wie HTML5-Datenattribute mit gängigen JavaScript- und jQuery-Bibliotheken funktionieren.

Das obige ist der detaillierte Inhalt vonJavaScript: Nutzen Sie HTML5-Datenattribute für maximale Effizienz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!