Maison >interface Web >js tutoriel >La différence entre .attr() et .data()

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

php中世界最好的语言original: 2018-04-19 15:39:301702parcourir

Cette fois, je vais vous présenter la différence entre .attr() et .data(). Quelles sont les précautions lors de l'utilisation de .attr() et .data(). . Jetons un coup d'oeil.

Jquery ObjetPropriétés et propriétés 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">
    vargetAttr1 = $('#app').attr('data-foo');
    vargetData1 = $('#app').data('foo');
    console.log('getAttr1: '+ getAttr1);//hello
    console.log('getData1: '+ getData1);//hello
    $('#app').attr('data-foo','world');//$.attr 设置DOM元素属性值
    vargetAttr2 = $('#app').attr('data-foo');
    vargetData2 = $('#app').data('foo');
    console.log('getAttr2: '+ getAttr2);//world
    console.log('getData2: '+ getData2);//*** hello ***
    $('#app').data('foo','WORLD');//$.data 设置DOM node属性值
    vargetAttr3 = $('#app').attr('data-foo');
    vargetData3 = $('#app').data('foo');
    console.log('getAttr3: '+ getAttr3);//world
    console.log('getData3: '+ getData3);//*** WORLD ***
  </script>
</html>

• $.attr() prend à chaque fois la valeur d'attribut de l'élément DOM, c'est-à-dire qu'elle est cohérente avec la valeur d'attribut dans la balise de 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() 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 incohérente avec la valeur de l'attribut dans la vue. •$.data('foo') obtiendra la valeur de l'attribut foo de l'objet Jquery, pas la valeur de l'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.

En combinant le code et les explications ci-dessus, tout le monde devrait être capable de comprendre la différence entre les deux.

Résumé

Par conséquent, $.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() 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 modifie uniquement la valeur d'attribut de l'objet Jquey et n'entraînera pas de Opérations DOM.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery définit la taille du zoom de l'image avec la molette de la souris

jQuery implémente la fonction de retour en haut

jQuery détermine s'il faut accéder au bas de la page Web

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!

php jquery 字符串对象 dom

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：Jquery+HTML+CSS implémente la fonction de liste déroulanteArticle suivant：Jquery+HTML+CSS implémente la fonction de liste déroulante

Articles Liés

Voir plus