$.attr()和$.data()本質上屬于 DOM屬性 和 Jquery對象屬性 的區別。
Jquery對象屬性和DOM屬性
一個簡單的例子
<!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()每次都從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()應避免混合用，也就是應該盡量避免如下兩種情況的出現：
1.通過$.attr()來進行set屬性，然后通過$.data()進行get屬性值；
2.通過$.data()來進行set屬性，然后通過$.attr()進行get屬性值。
同時從性能的角度來說，建議使用$.data()來進行set和get操作，因為它僅僅修改的 Jquey對象 的屬性值，不會引起額外的DOM操作。
以上所述是小編給大家介紹的jQuery中.attr()和.data()的區別分析，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
