Interaktion zwischen data-* und js

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>

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

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;>

Keine Angst, Sie können es erneut ausgeben

 console.log($("p").data('lastValue'));  //输出的值为:44

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

Verwenden Sie jQuery. Die Funktion attr() legt den data-*-Attributwert fest

$('p').attr('data-emp',{'name':'zhangsan','age':23}); //给p添加一个data-emp的属性,属性值为一个json对象

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!