jQuery $.data() vs $.attr() : quand utiliser lequel ?

JQuery Data vs Attr : comprendre les différences

Dans jQuery, $.data et $.attr sont utilisés pour manipuler les attributs dans le DOM éléments. Cependant, ils répondent à des objectifs distincts et diffèrent par leur utilisation et leur comportement.

Quand utiliser $.data

$.data est principalement utilisé pour stocker des données associées à un Élément DOM dans le cache interne de jQuery ($.cache). Ces données ne sont pas stockées sous forme d'attributs HTML sur l'élément lui-même. Par conséquent, si vous devez stocker des données de manière persistante à des fins de liaison de données ou de scripts personnalisés, $.data est le choix préféré.

Exemple :

<a>

$('#foo').data('myData', 'someValue');
// Gets the stored data
$('#foo').data('myData'); // outputs "someValue"

Quand utiliser $.attr

$.attr, en revanche, définit principalement ou récupère les attributs de données HTML5. Ces attributs de données sont stockés en tant qu'attributs sur l'élément DOM et sont destinés à fournir des métadonnées ou du contenu supplémentaires.

Exemple :

<a>

$('#foo').attr('data-attribute'); // outputs "myCoolValue"
$('#foo').attr('data-attribute', 'newValue'); // Sets the data-attribute to "newValue"

Considérations supplémentaires

• Le stockage de données avec $.data prend en charge les objets complexes, alors que HTML les attributs de données ne peuvent contenir que des chaînes.
• $.data convertit automatiquement les valeurs dans leurs types appropriés lors de la récupération de données, comme la conversion de "true" en booléen.
• $.attr préserve le type de données d'origine lors de la récupération des données.
• Pour éviter toute confusion, il est recommandé d'utiliser la syntaxe camelCase lors de l'accès aux données stockées avec $.data.
• Vous pouvez également utiliser $.removeAttr pour supprimer les attributs de données, qui n'ont pas d'équivalent direct avec $.data.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!