Verwendung der benutzerdefinierten data-*-Attribute von HTML5 und der data() method_html5-Tutorialfähigkeiten von jquery

Menschen fügen HTML-Tags immer gerne benutzerdefinierte Attribute hinzu, um Daten zu speichern und zu bearbeiten. Das Problem dabei ist jedoch, dass Sie nicht wissen, ob andere Skripte Ihre benutzerdefinierten Attribute in Zukunft zurücksetzen. Außerdem führt dies auch dazu, dass die HTML-Syntax nicht der HTML-Spezifikation entspricht sowie einige andere Nebenwirkungen. Aus diesem Grund wurde der HTML5-Spezifikation ein benutzerdefiniertes Datenattribut hinzugefügt, mit dem Sie viele nützliche Dinge tun können.

Sie können die detaillierten Spezifikationen von HTML5 lesen, aber die Verwendung dieses benutzerdefinierten Datenattributs ist sehr einfach, das heißt, Sie können dem HTML-Tag jedes Attribut hinzufügen, das mit „data-“ beginnt nicht angezeigt wird, hat dies keinen Einfluss auf das Layout und den Stil Ihrer Seite, ist aber lesbar und beschreibbar.

Der folgende Codeausschnitt ist ein gültiges HTML5-Markup:

Kopieren Sie den Code

Der Code ist wie folgt folgt:

data-myid="3e4ae6c4e">Einige tolle Daten

Aber wie um es zu lesen Wie bekomme ich diese Daten? Sie können natürlich die Seitenelemente durchlaufen, um die gewünschten Eigenschaften zu lesen, aber jQuery verfügt bereits über integrierte Methoden zum Bearbeiten dieser Eigenschaften. Verwenden Sie die .data()-Methode von jQuery, um auf diese „data-*“-Eigenschaften zuzugreifen. Eine der Methoden ist .data(obj). Diese Methode erschien nach jQuery 1.4.3. Sie kann das entsprechende Datenattribut zurückgeben.

Zum Beispiel können Sie den data-myid-Attributwert mit der folgenden Schreibmethode lesen:

Code kopieren

Der Code lautet wie folgt:

var myid= jQuery("#awesome").data('myid');

Sie können die JSON-Syntax auch in „data-*“-Attributen verwenden, wenn Sie beispielsweise den folgenden HTML-Code schreiben:

Code kopieren

Der Code lautet wie folgt:

Sie können über den Schlüsselwert von json direkt auf diese Daten zugreifen:

Code kopieren

Der Code lautet wie folgt: var gameStatus= jQuery("#awesome-json").data('awesome') .game;

console.log (gameStatus);

Sie können den „data-*“-Attributen auch direkt Werte über die Methode .data(key,value) zuweisen. Eine wichtige Sache, auf die Sie achten müssen, ist, dass sich diese „Daten-*“-Attribute auf das Element beziehen, in dem sie sich befinden, und dass sie nicht als Speichertool zum Speichern von Daten verwendet werden dürfen.

Ergänzung für den Übersetzer: Obwohl „data-*“ ein Attribut ist, das nur in HTML5 vorkommt, ist jquery universell, sodass Sie in Nicht-HTML5-Seiten oder Browsern weiterhin .data(obj)-Methoden zum Bearbeiten verwenden können „data-*“ Daten.