data([key],[value]) 在元素上存放或讀取資料,返回jQuery物件

上面是在jQuery手冊中的擷取，“存放”資料？

先看程式碼

<div id="div1" data-test="test">1</div>
<script>
    console.log($("#div1").data("test"));//test
</script>

OK，讀取是正常的。
再來，

<div id="div1" data-test="test">1</div>
<script>
    $("#div1"
 
).data("test","name");
</script>

這裡看一下元素

奇怪，怎麼data-test的值還是test？

回去看手冊，

當引數為兩個時，為像該jQuery物件對應的DOM中儲存key-value鍵值對的資料

似乎沒有發現什麼問題，或者可以列印一下

<div id="div1" data-test="test">1</div>
<script>
    $("#div1").data("test","name");
    console.log($("#div1").data("test"));//name
 

</script>

再輸出的時候發現$(“#div1”).data(“test”)的值是“name”
而元素中依然是

<div id="div1" data-test="test">1</div>

先了解一下data

其實是這樣的，當我們執行例如這樣的語句時 $(“#id”).data(“test”); (簡化後的過程)

第一步: jQuery 會獲取到 $(“#id”) 元素，對吧、
第二步: 執行到 data方法 的時候，他會通過 attributes 取我們要的對應值。
第三步:返回結果給我們，然後 jQuery 把值快取到內部物件裡 第一次取的時候，我們可以得到的undefined，字串，數字或者解析後的json。

那有人會說這個和 attr 有什麼區別呢？ 當我們第二次執行$(“#id”).data(“test”); 的時候：

第一步: jQuery 會獲取到 $(“#id”) 元素，和上面一樣。
第二步:執行到 data方法 的時候，從 jQuery 的快取中取值
為什麼不是從 attributes 取值，而是從快取中取呢？
快取其實是js的物件，簡單說就類似 var cache = {};
jQuery 在第一次取值之後就會儲存到這個快取物件中，這樣我們再次操作的時候就非常快了、 往往效能的損耗都是在 dom 操作上，所以避免重複操作 dom 是非常必要的。

現在可以看到，data方法確實給在元素上存放或讀取資料
而這個存放，實質上並沒有改變元素的上的data屬性，而是在快取中為該物件設定了一個值，在以後的獲取中，也是直接的得到快取中的一個值。

其實這樣會有一個問題，就是不能正常獲得元素中的屬性值，
如果不瞭解這個機制的人，可能會掉下坑就爬不起來了。
(果然還是有必要了解一下jquery的原始碼啊)

至於設定元素上的data屬性值，可以用attr()方法吧