Maison > Article > interface Web > La différence entre .attr() et .data() dans jQuery

La différence entre .attr() et .data() dans jQuery

小云云original: 2017-12-29 11:20:351327parcourir

$.attr() et $.data() sont essentiellement la différence entre les attributs DOM et les attributs d'objet Jquery. Utilisons un exemple pour vous présenter la différence entre .attr() et .data() dans jQuery. Jetons un coup d'œil

$.attr() et $.data() appartiennent essentiellement aux attributs DOM. et les objets Jquery attribuent les différences.

Attributs d'objet Jquery et attributs DOM

Un exemple simple

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jquery中.attr和.data的区别</title>
  </head>
  <body>
    <p id="app" data-foo="hello"></p>
  </body>
  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    var getAttr1 = $('#app').attr('data-foo');
    var getData1 = $('#app').data('foo');
    console.log('getAttr1: ' + getAttr1); //hello
    console.log('getData1: ' + getData1); //hello
    $('#app').attr('data-foo', 'world'); //$.attr 设置DOM元素属性值
    var getAttr2 = $('#app').attr('data-foo');
    var getData2 = $('#app').data('foo');
    console.log('getAttr2: ' + getAttr2); //world
    console.log('getData2: ' + getData2); //*** hello ***
    $('#app').data('foo', 'WORLD'); //$.data 设置DOM node属性值
    var getAttr3 = $('#app').attr('data-foo');
    var getData3 = $('#app').data('foo');
    console.log('getAttr3: ' + getAttr3); //world
    console.log('getData3: ' + getData3); //*** WORLD ***
  </script>
</html>

• $.attr() prend à chaque fois la valeur de l'attribut de l'élément DOM, qui est Être cohérent avec la valeur de l'attribut dans l'étiquette dans la vue. •$.attr('data-foo') obtiendra la valeur de l'attribut data-foo de la balise

•$.attr('data-foo', 'world') obtiendra la valeur de l'attribut data-foo', 'world') obtiendra la valeur de l'attribut data-foo de la balise ; la chaîne 'world' est insérée dans l'attribut 'data-foo' de la balise ;

•$.data() prend la valeur de l'objet Jquery Puisque la valeur de l'attribut de l'objet est stockée en mémoire, elle peut. être différent de la valeur dans la vue. •$.data('foo') obtiendra la valeur d'attribut foo de l'objet Jquery, pas la valeur d'attribut data-foo de la balise

•$.data('foo', ' world') insérera la chaîne 'world' dans l'attribut 'foo' de l'objet Jquery au lieu de l'attribut data-foo de la balise view.

Combiné avec le code et l'explication ci-dessus, tout le monde devrait être capable de comprendre la différence entre les deux.

Résumé

Donc $.attr() et $.data() doivent éviter une utilisation mixte, c'est-à-dire que les deux situations suivantes doivent être évitées autant que possible :

1. Utilisez $.attr() pour définir l'attribut, puis utilisez $.data() pour obtenir la valeur de l'attribut

2. Utilisez $.data() pour définir l'attribut, puis utilisez. $.attr() récupère la valeur de l'attribut.

En même temps, du point de vue des performances, il est recommandé d'utiliser $.data() pour les opérations set et get, car cela modifie uniquement la valeur d'attribut de l'objet Jquey et ne provoque pas d'opérations DOM supplémentaires. .

Recommandations associées :

La différence entre attr() et prop() de jQuery

Attribut CSS attr()

jQuery : La différence entre attr() et prop()

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée d'exemples de jquery+css implémentant la fonction de liste déroulanteArticle suivant：Explication détaillée d'exemples de jquery+css implémentant la fonction de liste déroulante

Articles Liés

Voir plus