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.
JqueryObjetProprié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!