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

JQuery Data vs Attr

Lorsque vous travaillez avec des attributs de données, vous pouvez utiliser deux méthodes jQuery principales : $.data et $. attr. Comprendre leurs différences est crucial pour un stockage et une récupération efficaces des données.

$.attr pour les attributs de données HTML5

Si vous utilisez des attributs de données HTML5, tels comme <a>, la méthode appropriée est $.attr. Cela vous permet de lire et d'écrire des attributs de données directement à partir du code HTML de l'élément. Par exemple :

$('#foo').attr('data-foo'); // Outputs: "bar"
$('#foo').attr('data-foo', 'baz'); // Updates the attribute to "baz"

$.data pour le stockage de données arbitraires

En revanche, $.data vous permet de stocker des données arbitraires sur un élément, sans rapport avec des données spécifiques attributs. Ces données ne sont pas accessibles via HTML, mais plutôt via le cache jQuery. Il est souvent utilisé pour l'instanciation de widgets et le stockage d'objets complexes. Par exemple :

$('#foo').data('myData', {key: 'value'});
$('#foo').data('myData').key; // Outputs: "value"

Traits d'union et CamelCase dans $.data

Lors de l'utilisation de $.data, les noms d'attributs de données avec trait d'union sont automatiquement convertis en camelCase, tandis que l'original Le format avec trait d'union reste disponible en HTML. Cependant, l'utilisation de traits d'union en JavaScript n'est pas recommandée pour l'accès via $.data().

Casting automatique dans $.data

Une autre fonctionnalité utile de $.data () est sa capacité à générer automatiquement des valeurs. Si la valeur correspond à un modèle reconnu, elle sera convertie dans le type de données approprié. Ce modèle simplifié :

<a>

Peut être consulté comme :

$('#foo').data('num'); // Outputs: 15
$('#foo').data('bool'); // Outputs: true
$('#foo').data('json'); // Outputs: {fizz: ['buzz']}

Quand utiliser $.attr vs $.data

Généralement , utilisez $.attr pour accéder aux attributs de données HTML5 qui nécessitent une interaction directe avec HTML. Utilisez $.data pour stocker des données arbitraires non accessibles via HTML, en particulier lorsque vous travaillez avec des objets complexes.

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!