JQuery中元素的数据存储
jQuery就提供了一個.data()的方法來處理這個問題
使用jQuery初學者一般不是很關心data方式，這個方法是jquery內部預用的，可以用來做性能優化，比如sizzle選擇中可以用來緩存部分結果集等等。當然這個也是非常重要的一個API了，常常用于我們存放臨時的一些數據，因為它是直接跟DOM元素對象綁定在一起的
jQuery提供的存儲接口
jQuery.data( element, key, value ) //靜態接口,存數據
jQuery.data( element, key ) //靜態接口,取數據
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據
2個方法在使用上存取都是通一個接口，傳遞元素，鍵值數據。在jQuery的官方文檔中，建議用.data()方法來代替。
我們把DOM可以看作一個對象，那么我們往對象上是可以存在基本類型，引用類型的數據的，但是這里會引發一個問題，可能會存在循環引用的內存泄漏風險。
通過jQuery提供的數據接口，就很好的處理了這個問題了，我們不需要關心它底層是如何實現，只需要按照對應的data方法使用就行了。
同樣的也提供2個對應的刪除接口，使用上與data方法其實是一致的，只不過是一個是增加一個是刪除罷了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
參考下面邊代碼區域，2個代碼段分別描述了靜態與實例data的使用
<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>.left,.right {width: 300px;height: 120px;}.left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}.left div {background: #bbffaa;}.right div {background: yellow;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body><h2>jQuery.data()靜態方法</h2><div class="left"><div class="aaron"><p>點擊看結果</p><p>jQuery.data</p></div><div><span></span></div></div><h2>.data()實例方法</h2><div class="right"><div class="aaron"><p>點擊看結果</p><p>.data</p></div><div><span></span></div></div><script type="text/javascript">$('.left').click(function() {var ele = $(this);//通過$.data方式設置數據$.data(ele, "a", "data test")$.data(ele, "b", {name : "旅游網"})//通過$.data方式取出數據var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").nameele.find('span').append(reset)})</script><script type="text/javascript">$('.right').click(function() {var ele = $(this);//通過.data方式設置數據ele.data("a", "data test")ele.data("b", {name: "旅游網"})//通過.data方式取出數據var reset = ele.data("a") + "</br>" + ele.data("b").nameele.find('span').append(reset)})</script> </body></html>總結
以上是生活随笔為你收集整理的JQuery中元素的数据存储的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JQuery中.css()与.addCl
- 下一篇： 增发股票是利好还是利空，分以下两种情况