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

WBOY

Libérer： 2016-05-16 15:50:51

original

1822 Les gens l'ont consulté

Peut-être que lorsque vous utilisez jquery mobile, vous voyez souvent l'utilisation de data-role, data-theme, etc., par exemple : l'effet d'en-tête peut être obtenu grâce au code suivant :

Copier le code

Le code est le suivant :

i C'est le titre

Parcourez via le téléphone portable, l'effet est le suivant :

Pourquoi l'écriture d'un data-role="header" peut-elle obtenir l'effet d'un fond noir et d'un texte centré ?

Cet article propose la méthode de mise en œuvre la plus simple afin que chacun puisse avoir une compréhension intuitive de ces usages.

Nous écrivons une page html et personnalisons un attribut data-chb="header". Nous espérons que la couleur d'arrière-plan de la zone div avec cet attribut sera noire, le texte sera blanc et le texte sera affiché dans le centre ; s'il n'a pas l'attribut personnalisé data-chb Le div est affiché par défaut, et le code html est le suivant :

Copiez le code

Le code est le suivant :

J'ai utilisé l'attribut personnalisé data-chb pour le div

Je n'ai pas utilisé le data-chb attribut personnalisé, afin que je puisse l'afficher comme je le souhaite ;

< /body>

Pour obtenir l'effet d'affichage de "la couleur d'arrière-plan est noire, le texte est blanc, et le texte est centré", on définit le css suivant :

Copier le code

Le code est comme suit :

Ensuite, nous passons le js suivant La méthode consiste à ajouter dynamiquement des définitions CSS et à changer le style d'affichage des divs avec attributs data-chb lorsque la page est chargée :

Copier le code Le code est le suivant :

L'effet d'affichage de la page finale est le suivant :

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 :

Copier le code Le code est le suivant :

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

Mais, comment lire ces données Woollen tissu? 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 l'attribut "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 code

Le 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, vous pouvez donc toujours utiliser .data dans des pages ou des méthodes de navigateurs (obj) non HTML5. pour opérer sur les données "data-*".