jquery data屬性 attr vs data
html5的自定義data屬性相信大家都不會陌生，有了它你可以綁定所需的數據到指定元素上。然後通過jquery設置、獲取數據，簡直開心的不行啊。
想到設置、獲取元素屬性值，大家一定首先想到了jquery的.attr()方法，但是你一定知道jquery還有個.data()的方法。本人以前一直萌(傻)萌(傻)噠(的)以為這兩個方法在處理data屬性過程中實現的效果是一樣的，只不過.data()方法官方更推薦使用(看名字就感覺人家是正規軍)。但後來本人在做項目的過程中發現，這兩種方法處理data屬性並不相同(想想也是，要是一樣，還搞個data幹毛)。廢話少說，下面來點幹的：
1 <html>2 <head> 3 <meta charset="UTF-8"> 4 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 5 6 <script> 7 $(function(){ 8 $("#btn1").click(function(){ 9 $("div").attr("data-my-value", "使用attr改變的數據"); 10 $("p").text("使用attr設置數據成功"); 11 });12 $("#btn2").click(function(){ 13 $("div").data("myValue", "使用data改變的數據"); 14 $("p").text("使用data設置數據成功"); 15 }); 16 $("#btn3").click(function(){ 17 var v = $("div").attr("data-my-value"); 18 $("p").text("使用attr獲取數據："+v); 19 }); 20 $("#btn4").click(function(){ 21 var v= $("div").data("myValue"); 22 $("p").text("使用data獲取數據："+v); 23 }); 24 $("#btn5").click(function(){ 25 $("div").data("person", {age:12, name:"wang"}); 26 $("p").text("使用data增加屬性person成功"); 27 }); 28 $("#btn6").click(function(){ 29 console.log($("div").data()); 30 }); 31 }); 32 </script> 33 </head> 34 35 <body> 36 <button id="btn1">1.使用attr設置</button> 37 <button id="btn2">2.使用data設置</button> 38 <button id="btn3">3.使用attr獲取</button> 39 <button id="btn4">4.使用data獲取</button> 40 <button id="btn5">5.使用data增加person屬性</button> 41 <button id="btn6">6.控制臺打印data</button>
42 <div data-my-value="服務器渲染數據"></div> 43 <p></p> 44 </body> 45 </html>
這段代碼是不是簡單的不行了，下面我們用這段代碼說明一下.attr()和.data()在處理data屬性時的不同之處：
這裏我們給div增加了“data-my-value”屬性，很多時候data屬性的數據會在頁面加載時由服務器獲取，這裏我們通過構建DOM時將“data-my-value”賦值為“服務器渲染數據”的方法模擬服務器數據渲染。
- 首先我們點擊3、4按鈕，發現獲取的數據均為“服務器渲染數據”。好像沒什麽不同，別著急，繼續看。
- 接下來我們打開瀏覽器調試工具，註意div元素，點擊1按鈕，div的“data-my-value”變為“使用attr改變的數據”，然後點擊3按鈕，獲取的數據為“使用attr改變的數據”，點擊4按鈕，獲取的數據為“服務器渲染數據”。通過調試器我們發現元素的“data-my-value”屬性為“使用attr改變的數據”，為什麽通過.data()方法獲取的數據依舊是“服務器渲染數據”？我們再來看看下面的操作。
- 點擊2按鈕，通過調試器我們發現div的“data-my-value”屬性數據沒有發生變化，然後我們點擊3按鈕，獲取的數據為“使用attr改變的數據”，點擊4按鈕，獲取的數據為“使用data改變的數據”。what？
遇到問題，肯定要首先查官方手冊了，通過查詢手冊和在Stack Overflow查資料我總結了如下幾點(有不對的地方歡迎大家指正)：
- jquery通過attr直觀的設置、獲取data屬性值，data雖然為自定義屬性，但是attr處理它與處理標準元素相同。
- jquery的data方法是將數據存儲在與元素關聯的對象中，並不是改變元素的屬性值，通過.data()（不加任何參數）可以獲得該對象。點擊上面demo中的按鈕6可以在控制臺查看該對象。
- 有一點需要註意，當頁面加載時，jquery會默認將data屬性的數據加入到這個關聯的對象中，後面可以通過data(key,value)方法修改數據，也可以添加新的數據或對象，當然添加的新data屬性不會在DOM有所體現（通過點擊按鈕5增加新屬性，點擊6查看）。
總之，.attr()方法處理data屬性與標準屬性相同；使用.data()方法的整個過程中，jquery一直操作的是這個與元素關聯的對象，和DOM中元素本身的屬性無關。
文中有不對的地方歡迎大家多多指正。
參考：
http://api.jquery.com/attr/
https://api.jquery.com/data/
https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute
https://stackoverflow.com/questions/7261619/jquery-data-vs-attr
jquery data屬性 attr vs data