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?
Schreibbeispiel
<p data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'> </p>
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. * Attributwertconsole.log($("p").data('lastValue')); //输出的值为:43 console.log($("p").data('role')); //输出的值为:page
Notizen
Daten-**Format des Attributnamens in Groß- und Kleinschreibung umschreibenDaten- 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='{"name":"John"}'>
console.log($("p").data('lastValue')); //输出的值为:44
console.log($('p').attr('data-role')); //输出的值为:page console.log($('p').attr('data-last-value')); //输出的值为:43
$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象
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!