jquery中data()和attr()的差別是什麼

區別：「$.attr()」每次都從DOM元素中取屬性的值，即和視圖中標籤內的屬性值保持一致；而「$.data()」是從Jquery物件中取值，由於物件屬性值保存在記憶體中，和視圖中的屬性值不一定一致。

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

$.attr()和$.data()本質上屬於DOM屬性和Jquery物件屬性的區別。

一個簡單的範例

• $.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物件的屬性值，不會引起額外的DOM操作。

相關影片教學推薦：jQuery教學（影片）

以上是jquery中data()和attr()的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！