La méthode .data() nous permet de lire les données précédemment associées aux éléments du DOM. Nous pouvons récupérer plusieurs valeurs distinctes pour un seul élément, une à la fois, ou comme un ensemble :
|
1
2
3
4
5
6
7
|
|
Appeler .data() sans paramètres renvoie un objet JavaScript contenant chaque valeur stockée comme une propriété. L’objet peut être utilisé directement pour obtenir des valeurs de données (mais notez que les noms de propriétés contenant à l’origine des tirets auront été modifiés comme décrit ci-dessous).
Depuis jQuery 3, chaque séquence de deux caractères « – » (U+002D) suivie d’une lettre ASCII minuscule dans une clé est remplacée par la version majuscule de la lettre, en alignement avec l’API HTML dataset. Une déclaration comme $( "body" ).data( { "my-name": "aValue" } ).data(); renverra { myName: "aValue" }.
HTML5 data-* Attributs
Depuis jQuery 1.4.3, les attributs data-* sont utilisés pour initialiser les données jQuery. Les attributs data-* d’un élément sont récupérés la première fois que la méthode data() est invoquée sur lui, puis ne sont plus accessibles ou mutés (toutes les valeurs sont stockées en interne par jQuery).
Tout est fait pour convertir la valeur de la chaîne de l’attribut en une valeur JavaScript (cela inclut les booléens, les nombres, les objets, les tableaux et null). Une chaîne n’est convertie en nombre que si cela ne modifie pas sa représentation (par exemple, la chaîne « 100 » est convertie en nombre 100, mais « 1E02 » et « 100.000 » restent des chaînes car leur valeur numérique de 100 se sérialise en « 100 »). Lorsqu’une chaîne commence par ‘{‘ ou ‘[‘, jQuery.parseJSON est utilisé pour l’analyser ; elle doit respecter la syntaxe JSON valide, y compris les noms de propriétés entre guillemets. Une chaîne non analysable en tant que valeur JavaScript n’est pas convertie.
Pour récupérer une valeur d’attribut data-* en tant que chaîne non convertie, utilisez la méthode attr().
Depuis jQuery 1.6, les tirets dans les noms d’attributs data-* ont été traités en alignement avec l’API de jeu de données HTML.
Par exemple, étant donné le HTML suivant :
|
1
|
|
Les comparaisons suivantes sont toutes vraies :
|
1
2
3
4
|
|