Interaction entre data-* et js

Cette fois, je vais vous présenter l'interaction entre data-* et js. Quelles sont les précautions pour l'interaction entre data-* et js. Voici un cas pratique, jetons un oeil.

HTML5Nouvel attributdonnées-*

Exemple d'écriture

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

1. Définition :

les attributs data-* sont utilisés pour stocker les données privées personnalisées d'une page ou d'une application. Les attributs

data-* nous donnent la possibilité d'intégrer des attributs de données personnalisés sur tous les éléments HTML.

2. Remarque :

les attributs data-* comprennent deux parties :

• Le nom de l'attribut ne doit contenir aucune majuscule. lettres lettres, et il doit y avoir au moins un caractère après le préfixe "data-"

• La valeur de l'attribut peut être n'importe quelle chaîne

L'attribut data-* interagit avec jQuery

Utilisez la fonction .data() dans jQuery pour obtenir les données- * valeur d'attribut

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

Notes

données-**Format du nom d'attribut réécriture de dénomination de cas de chameau

données- L'attribut est dans Après avoir utilisé cet attribut de données une fois, il ne sera plus accessible ni modifié (toutes les valeurs de données sont stockées en interne dans jQuery)

Démo :

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

N'ayez pas peur, vous pouvez l'afficher à nouveau

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

La valeur est simplement stockée dans jQuery

Utilisez la fonction .attr() dans jQuery pour obtenir l'attribut data-* value

console.log($('p').attr('data-role')); //输出的值为:page
console.log($('p').attr('data-last-value')); //输出的值为:43

Utilisez jQuery. La fonction attr() définit la valeur de l'attribut data-*

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

Remarque : les tirets doivent être convertis en dénomination de cas de chameau

Je crois que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des événements push du serveur H5

Réalisation d'effets d'animation mobile basés sur le gyroscope HTML5

La toile H5 implémente le jeu Snake

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!