Heim > Web-Frontend > H5-Tutorial > Hauptteil

Interaktion zwischen data-* und js

php中世界最好的语言
Freigeben: 2018-03-27 09:17:12
Original
1963 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Interaktion zwischen data-* und js vorstellen. Was sind die Vorsichtsmaßnahmen für die Interaktion zwischen data-* und js?

HTML5Neues Attributdata-*

Schreibbeispiel

<p data-role="page"
     data-last-value="43"
     data-hidden="true"
     data-options=&#39;{"name":"John"}&#39;>
</p>
Nach dem Login kopieren

1. Definition:

Daten-*-Attribute werden zum Speichern privater benutzerdefinierter Daten einer Seite oder Anwendung verwendet. Die

data-*-Attribute geben uns die Möglichkeit, benutzerdefinierte Datenattribute in alle HTML-Elemente einzubetten.

2. Hinweis:

data-*-Attribute bestehen aus zwei Teilen:

  • Der Attributname sollte keine Großbuchstaben enthalten Buchstaben Buchstaben, und nach dem Präfix „data-“ muss mindestens ein Zeichen stehen

  • Der Attributwert kann eine beliebige Zeichenfolge

data-*-Attribut interagiert mit jQuery

Verwenden Sie die Funktion .data() in jQuery, um die Daten abzurufen. * Attributwert

console.log($("p").data('lastValue'));  //输出的值为:43
console.log($("p").data('role'));  //输出的值为:page
Nach dem Login kopieren

Notizen

Daten-**Format des Attributnamens in Groß- und Kleinschreibung umschreiben

Daten- Attribut befindet sich im Nach der einmaligen Verwendung dieses Datenattributs kann nicht mehr darauf zugegriffen oder geändert werden (alle Datenwerte werden intern in jQuery gespeichert)

Demo:


 console.log($("p").data('lastValue'));  //输出的值为:43
    $('p').data('lastValue',44);  //设置data-last-value=44
    $('p')[2]  //假设这是文档中的第3个p,我们输出这个dom
    //输出:<p data-role="page" data-last-value="43" data-hidden="true" data-options=&#39;{"name":"John"}&#39;>
Nach dem Login kopieren
Keine Angst, Sie können es erneut ausgeben

 console.log($("p").data('lastValue'));  //输出的值为:44
Nach dem Login kopieren
Der Wert wird einfach in jQuery gespeichert

Verwenden Sie die Funktion .attr() in jQuery, um das data-*-Attribut abzurufen value

console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43
Nach dem Login kopieren
Verwenden Sie jQuery. Die Funktion attr() legt den data-*-Attributwert fest

$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象
Nach dem Login kopieren
Hinweis: Bindestriche sollten in Kamel-Groß-/Kleinschreibung umgewandelt werden

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung von H5-Server-Push-Ereignissen

Realisierung mobiler Animationseffekte basierend auf HTML5-Gyroskop

H5 Canvas implementiert das Snake-Spiel

Das obige ist der detaillierte Inhalt vonInteraktion zwischen data-* und js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage