Données. Dans le monde de jQuery, tout est question de bits d'informations qui sont directement attachés aux éléments (plutôt que, par exemple, d'une variable dont le fardeau ne concerne que lui-même). Il existe une multitude de façons de sauvegarder des bits de données du côté «client» (dans le navigateur plutôt que sur le serveur). Il existe des variables de toutes sortes, des cookies, localStorage, indexDB et qui sait quoi tout le reste. Les données sont utilisées lorsque ces données sont spécifiquement pertinentes pour un élément spécifique.
Comme beaucoup de méthodes jQuery, il a à la fois un setter (deux paramètres):
$("#thing").data("name", "value");et un getter (un paramètre):
$("#thing").data("name"); // "value"Vous pouvez l'utiliser sur n'importe quel objet jQuery. S'il y a plusieurs éléments dans cet objet, tous obtiennent cette valeur de données lorsque vous l'utilisez comme setter. S'il y a plusieurs éléments dans cet objet lorsque vous l'utilisez comme getter, il utilisera le premier élément.
Une façon de penser aux données est que l'élément est un peu comme un espace de noms. De nombreux éléments peuvent utiliser le même «nom» de données mais avoir des valeurs différentes.
Il existe un cas d'utilisation concret dans une ancienne démo CSS-Tricks, le curseur Google Maps. Dans cette démo, il y a une liste d'emplacements et une carte Google intégrée. Lorsque vous survolez les emplacements, la carte se déplace pour centrer cet emplacement. Pour ce faire, l'API de carte a besoin de coordonnées. Il est logique d'avoir ces données dans le HTML pour ces emplacements, mais nous n'avons pas besoin de les voir. C'est un cas d'utilisation parfait pour les data-*attributs en HTML (nouveau dans HTML5). Un élément de liste dans cette liste d'emplacements peut être comme ceci alors:
O'Hare Airport
Flights n' stuff
About: Info about location…
data-*est juste une façon de dire data- anything . Vous pouvez simplement créer des attributs de données. Tout ce que tu veux. Dans ce cas, nous en avons créé un pour la latitude et un autre pour la longitude. Lorsqu'un événement de survol de la souris se déclenche sur cet élément de liste, nous utilisons simplement le getter jQuery pour .data()extraire les informations et les utiliser avec l'API.
Nous avons donc maintenant examiné les données de deux manières, les données qui sont à la fois définies et obtenues à partir de JavaScript lui-même, et les données qui commencent dans le HTML et sont utilisées par JavaScript. Les deux vont bien et l'API est la même. Vous pourriez penser à utiliser .data()comme un getter pour les informations dans rel = "jQuery">$("#thing").attr("rel"); // or any other attribute
Vous pouvez également l'utiliser de cette façon si vous le souhaitez:
$("#thing").attr("data-geo-lat");Le .data()getter n'est qu'un raccourci. Et je l'aime un peu car cela vous met dans le bon état d'esprit.
Cependant, il est important de noter que l'utilisation en .data()tant que setter ne modifie pas réellement l' data-*attribut dans le HTML . C'est un bon défaut car ne pas modifier le DOM signifie qu'il est plus rapide. Si vous devez absolument changer l'attribut dans le HTML, utilisez la .attr()méthode comme setter. Notez également que lorsque .attr()vous utilisez, vous devez inclure le préfixe «data-» que vous n'avez pas besoin d'utiliser .data().
$("#thing").attr("data-name", "Chris");Vous devrez peut-être le faire pour être sûr que d'autres parties de l'application ont accès, ou si vous faites quelque chose comme écrire des sélecteurs CSS contre eux (par exemple (data-something="whatever") ( ))