Quelle est la différence entre data() et attr() dans jquery-Questions et réponses frontales-php.cn

Quelle est la différence entre data() et attr() dans jquery

青灯夜游

Libérer： 2021-11-15 14:38:58

original

2010 Les gens l'ont consulté

Différence : "$.attr()" prend à chaque fois la valeur de l'attribut de l'élément DOM, ce qui est cohérent avec la valeur de l'attribut dans la balise de la vue, tandis que "$.data()" prend la valeur de Jquery ; object , puisque les valeurs d'attribut d'objet sont stockées en mémoire, elles ne sont pas nécessairement cohérentes avec les valeurs d'attribut dans la vue.

Quelle est la différence entre data() et attr() dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

$.attr() et $.data() appartiennent essentiellement aux attributs DOM et aux attributs d'objet Jquery différence. $.attr()和$.data()本质上属于DOM属性和Jquery对象属性的区别。

一个简单的例子

<!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 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData1 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr1: &#39; + getAttr1); //hello
        console.log(&#39;getData1: &#39; + getData1); //hello
 
        $(&#39;#app&#39;).attr(&#39;data-foo&#39;, &#39;world&#39;); //$.attr 设置DOM元素属性值
        var getAttr2 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData2 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr2: &#39; + getAttr2); //world
        console.log(&#39;getData2: &#39; + getData2); //*** hello ***
 
        $(&#39;#app&#39;).data(&#39;foo&#39;, &#39;WORLD&#39;); //$.data 设置DOM node属性值
        var getAttr3 = $(&#39;#app&#39;).attr(&#39;data-foo&#39;);
        var getData3 = $(&#39;#app&#39;).data(&#39;foo&#39;);
        console.log(&#39;getAttr3: &#39; + getAttr3); //world
        console.log(&#39;getData3: &#39; + getData3); //*** WORLD ***
 
    </script>
</html>

Copier après la connexion

$.attr()每次都从DOM元素中取属性的值，即和视图中标签内的属性值保持一致。
- $.attr('data-foo')会从标签内获得data-foo属性值；
- $.attr('data-foo', 'world')会将字符串'world'塞到标签的'data-foo'属性中；
$.data()是从Jquery对象中取值，由于对象属性值保存在内存中，因此可能和视图里的属性值不一致的情况。
- $.data('foo')会从Jquery对象内获得foo的属性值，不是从标签内获得data-foo属性值；
- $.data('foo', 'world')会将字符串'world'塞到Jquery对象的'foo'属性中，而不是塞到视图标签的data-foo属性中。

结合上面代码和解释，大家应该能够理解两者的区别。

所以$.attr()和$.data()应避免混合用，也就是应该尽量避免如下两种情况的出现：

通过$.attr()来进行set属性，然后通过$.data()进行get属性值；
通过$.data()来进行set属性，然后通过$.attr()进行get属性值。

同时从性能的角度来说，建议使用$.data()来进行set和get操作，因为它仅仅修改的Jquey对象

Un exemple simple

rrreee

$.attr() prend à chaque fois la valeur d'attribut de l'élément DOM element, ce qui est cohérent avec la valeur d'attribut dans la balise dans la vue .
- $.attr('data-foo') obtiendra la valeur de l'attribut data-foo de la balise 🎜
- 🎜$.attr('data-foo', ' world ') insérera la chaîne 'world' dans l'attribut 'data-foo' de la balise 🎜
🎜$.data() provient du ; Objet Jquery . Étant donné que les valeurs d'attribut d'objet sont stockées en mémoire, elles peuvent être incohérentes avec les valeurs d'attribut 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 des données dans l'attribut foo . 🎜

🎜Combiné avec le code et l'explication ci-dessus, tout le monde devrait être capable de comprendre la différence entre les deux. 🎜🎜Donc $.attr() et $.data() doivent éviter une utilisation mixte, c'est-à-dire que les deux situations suivantes doivent être évitées autant que possible : 🎜

🎜 Définissez l'attribut via $.attr(), puis obtenez la valeur de l'attribut via $.data(); 🎜
🎜 Définissez l'attribut via $.data(), puis utilisez $. .attr( ) pour obtenir 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 ne modifie que la valeur d'attribut de l'objet Jquey . Aucune opération DOM supplémentaire ne sera provoquée. 🎜🎜Tutoriels vidéo associés recommandés : 🎜Tutoriel jQuery🎜(Vidéo)🎜

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!