suchen

Heim  >  Artikel  >  Web-Frontend  >  Verwendung der benutzerdefinierten HTML5-Attribute data-* data(obj) und der data() method_html5-Tutorialfähigkeiten von jquery

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

WBOY
WBOYOriginal
2016-05-16 15:50:511797Durchsuche

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:

Code kopieren
Der Code lautet wie folgt:


i Es ist der Titel




Durchsuchen Sie das Mobiltelefon. Der Effekt ist wie folgt:

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:

Kopieren Sie den Code
Der Code lautet wie folgt:



Ich habe das benutzerdefinierte Attribut data-chb für div





verwendet. Ich habe data-chb nicht verwendet benutzerdefiniertes Attribut, damit ich es wie gewünscht anzeigen kann; „Der Text ist weiß und der Text ist zentriert“, wir definieren das folgende CSS:




Code kopieren
Der Code ist wie folgt:


Dann übergeben wir die folgenden js. Die Methode besteht darin, CSS-Definitionen dynamisch hinzuzufügen und den Anzeigestil von Divs mit zu ändern data-chb-Attribute beim Laden der Seite:




Code kopieren
Der Code lautet wie folgt:


Der endgültige Seitenanzeigeeffekt ist 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

Der Code lautet wie folgt:

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


Aber wie man diese Daten liest Woolen Tuch? 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 Wert des data-myid-Attributs mit der folgenden Schreibmethode lesen:

Code kopieren
Der Code lautet wie folgt:

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

console.log(myid); Sie können auch die JSON-Syntax im Attribut „data-*“ verwenden, wenn Sie beispielsweise den folgenden HTML-Code schreiben:

Code kopieren
Der Code lautet wie folgt:



Sie können über js direkt auf diese Daten zugreifen. Über den Schlüsselwert von json können Sie den entsprechenden Wert abrufen:

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 .data weiterhin in Nicht-HTML5-Seiten oder Browsern (obj) verwenden können um mit „data-*“-Daten zu arbeiten.
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
Vorheriger Artikel：Holen Sie sich kostenlos ein Microsoft MCSD-Zertifikat und handeln Sie jetzt! _html5-Tutorial-FähigkeitenNächster Artikel：Holen Sie sich kostenlos ein Microsoft MCSD-Zertifikat und handeln Sie jetzt! _html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen