web-dev-qa-db-fra.com

jQuery Data vs Attr?

Quelle est la différence d'utilisation entre $.data et $.attr lors de l'utilisation de data-someAttribute?

Je crois comprendre que $.data est stocké dans $.cache de jQuery, et non dans le DOM. Par conséquent, si je veux utiliser $.cache pour le stockage de données, je dois utiliser $.data. Si je veux ajouter des attributs de données HTML5, je devrais utiliser $.attr("data-attribute", "myCoolValue").

javascriptjqueryhtml5custom-data-attribute
496
John B

Si vous transmettez des données à un élément DOM à partir du serveur, vous devez définir les données sur l'élément:

<a id="foo" data-foo="bar" href="#">foo!</a>

Les données peuvent ensuite être consultées à l'aide de .data() dans jQuery:

console.log( $('#foo').data('foo') );
//outputs "bar"

Toutefois, lorsque vous stockez des données sur un nœud DOM dans jQuery à l'aide de données , les variables sont stockées sur l'objet nœud . Cela permet de gérer des objets et des références complexes, car l'enregistrement des données sur l'élément node en tant qu'attribut ne prend en charge que les valeurs de chaîne.

En continuant mon exemple ci-dessus:
$('#foo').data('foo', 'baz');

console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed

console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object

En outre, la convention de dénomination pour les attributs de données a un peu un "gotcha" caché:

HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

La clé avec trait d'union fonctionnera toujours:

HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

Cependant, l'objet renvoyé par .data() n'aura pas la clé composée comme un trait d'union:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

C'est pour cette raison que je suggère d'éviter la clé avec trait d'union en javascript.

Pour HTML, continuez à utiliser la forme avec un trait d'union. les attributs HTML sont supposés être automatiquement en minuscules , donc <div data-foobar></div>, <DIV DATA-FOOBAR></DIV> et <dIv DaTa-FoObAr></DiV> sont supposés doivent être considérés comme identiques, mais pour une compatibilité optimale, la forme minuscule doit être préférée.

La méthode .data() effectuera également une conversion automatique de base si la valeur correspond à un modèle reconnu:

HTML:
<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>
JS:
$('#foo').data('str');  //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num');  //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`

Cette capacité de diffusion automatique est très pratique pour instancier des widgets et des plugins:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

Si vous devez absolument avoir la valeur d'origine en tant que chaîne, vous devrez alors utiliser .attr() :

HTML:
<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>
JS:
$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers

$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6

C'était un exemple artificiel. Pour stocker les valeurs de couleur, j’utilisais auparavant la notation numérique hexadécimale (c’est-à-dire 0xABC123), mais il convient de noter que hexa a été analysé de manière incorrecte dans les versions jQuery antérieures à la version 1.7.2 et n’est plus analysé dans un fichier Number à partir de jQuery 1.8 rc 1.

jQuery 1.8 rc 1 a modifié le comportement de la diffusion automatique . Auparavant, tout format représentant correctement Number était converti en Number. Désormais, les valeurs numériques ne sont converties automatiquement que si leur représentation reste la même. Ceci est mieux illustré par un exemple.

HTML:
<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>
JS:
                              // pre 1.8    post 1.8
$('#foo').data('int');        //    1000        1000
$('#foo').data('decimal');    //    1000   "1000.00"
$('#foo').data('scientific'); //    1000       "1e3"
$('#foo').data('hex');        //    1000     "0x03e8"

Si vous envisagez d'utiliser d'autres syntaxes numériques pour accéder aux valeurs numériques, veillez à convertir cette valeur en un fichier Number, par exemple avec un opérateur unaire +.

JS (suite):
+$('#foo').data('hex'); // 1000
739
zzzzBov

La principale différence entre les deux réside dans le lieu de stockage et les modalités d'accès.

$.fn.attr stocke les informations directement sur l'élément dans des attributs qui sont visibles publiquement lors de l'inspection et qui sont également disponibles à partir de l'API native de l'élément.

$.fn.data stocke les informations dans un ridiculement obscur lieu. Il se trouve dans une variable locale fermée appelée _data_user_, qui est une instance d'une fonction définie localement Data. Cette variable n'est pas accessible directement de l'extérieur de jQuery.

Jeu de données avec attr()

  • accessible depuis $(element).attr('data-name')
  • accessible depuis element.getAttribute('data-name'),
  • si la valeur était sous la forme _data-name_ également accessible à partir de $(element).data(name) et _element.dataset['name']_ et _element.dataset.name_
  • visible sur l'élément lors de l'inspection
  • ne peuvent pas être des objets

Jeu de données avec .data()

  • accessible seulement à partir de .data(name)
  • non accessible depuis .attr() ou ailleurs
  • non visible publiquement sur l'élément lors de l'inspection
  • peut être des objets
101
Travis J

Vous pouvez utiliser l'attribut data-* pour incorporer des données personnalisées. Les attributs data-* nous permettent d'intégrer des attributs de données personnalisés à tous les éléments HTML.

la méthode jQuery .data() vous permet d'obtenir/de définir des données de tout type sur des éléments DOM de manière à éviter les références circulaires et donc les fuites de mémoire.

jQuery .attr() méthode get/set valeur d'attribut uniquement pour le premier élément de l'ensemble correspondant.

Exemple:

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");
0
Yogendra Chauhan