Utilisation des attributs data-* personnalisés de HTML5 et des compétences du didacticiel data() method

Utilisation des attributs data-* personnalisés de HTML5 et des compétences du didacticiel data() method_html5 de jquery

WBOY

Libérer： 2016-05-16 15:47:23

original

1384 Les gens l'ont consulté

Les gens aiment toujours ajouter des attributs personnalisés aux balises HTML pour stocker et manipuler des données. Mais le problème avec cela est que vous ne savez pas si d'autres scripts réinitialiseront vos attributs personnalisés à l'avenir. De plus, si vous faites cela, la syntaxe HTML ne sera pas non plus conforme à la spécification HTML. ainsi que d'autres effets secondaires. C'est pourquoi un attribut de données personnalisé a été ajouté à la spécification HTML5, et vous pouvez faire beaucoup de choses utiles avec.

Vous pouvez lire les spécifications détaillées de HTML5, mais l'utilisation de cet attribut de données personnalisé est très simple, c'est-à-dire que vous pouvez ajouter n'importe quel attribut commençant par "data-" à la balise HTML de ces pages d'attributs. n'est pas affiché, cela n'affectera pas la mise en page et le style de votre page, mais il est lisible et inscriptible.

L'extrait de code suivant est un balisage HTML5 valide :

Copiez le code

Le code est tel suit :

data-myid="3e4ae6c4e">Quelques données géniales

Mais, comment pour le lire Comment obtenir ces données ? Vous pouvez bien sûr parcourir les éléments de la page pour lire les propriétés souhaitées, mais jQuery dispose déjà de méthodes intégrées pour manipuler ces propriétés. Utilisez la méthode .data() de jQuery pour accéder à ces propriétés "data-*". L'une des méthodes est .data(obj). Cette méthode est apparue après jQuery 1.4.3. Elle peut renvoyer l'attribut de données correspondant.

Par exemple, vous pouvez lire la valeur de l'attribut data-myid en utilisant la méthode d'écriture suivante :

Copier le code

Le code est le suivant :

var myid= jQuery("#awesome").data('myid');
console.log(myid); 🎜>
Vous pouvez également utiliser la syntaxe json dans les attributs "data-*", par exemple, si vous écrivez le code html suivant :

Copier le code Le code est le suivant :

Vous pouvez accéder à ces données directement via js Grâce à la valeur clé de json, vous pouvez obtenir la valeur correspondante :

Copier le codeLe code est le suivant :

var gameStatus= jQuery("#awesome-json").data('awesome') .game;

console.log (gameStatus);

Vous pouvez également attribuer directement des valeurs aux attributs "data-*" via la méthode .data(key,value). Une chose importante à laquelle vous devez prêter attention est que ces attributs "data-*" doivent être liés à l'élément dans lequel ils se trouvent et ne pas les utiliser comme outils de stockage pour stocker quoi que ce soit.

Supplément du traducteur : bien que "data-*" soit un attribut qui n'apparaît qu'en HTML5, jquery est universel, donc dans les pages ou navigateurs non HTML5, vous pouvez toujours utiliser les méthodes .data(obj) pour opérer sur Données "données-*".