Heim > Artikel > Web-Frontend > Verwendung der benutzerdefinierten HTML5-Attribute data-* data(obj) und der data() method_html5-Tutorialfähigkeiten von jquery
Vielleicht sehen Sie bei der Verwendung von jQuery Mobile häufig die Verwendung von Datenrollen, Datenthemen usw., zum Beispiel: Der Header-Effekt kann durch den folgenden Code erreicht werden:
Warum kann das Schreiben eines data-role="header" den Effekt von schwarzem Boden und zentriertem Text erzielen?
Dieser Artikel bietet die einfachste Implementierungsmethode, damit jeder ein intuitives Verständnis dieser Verwendungen erlangen kann.
Wir schreiben eine HTML-Seite und passen ein data-chb="header"-Attribut an. Wir hoffen, dass die Hintergrundfarbe des div-Bereichs mit diesem Attribut schwarz ist, der Text weiß ist und der Text angezeigt wird das Zentrum; wenn es nicht über das benutzerdefinierte Attribut data-chb verfügt Das div wird standardmäßig angezeigt und der HTML-Code lautet wie folgt:
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
:
Code kopieren