html5 dataset是新的HTML5標準,允許你在普通的元素標籤裏嵌入類似data-*的屬性,來實現一些簡單數據的存取。它的數量不受限制,並且也能由JavaScript動態修改,也支持CSS選擇器進行樣式設置。這使得data屬性特別靈活,也非常強大。有了這樣的屬性我們能夠更加有序直觀的進行數據預設或存儲。那麼在不支持HTML5標準的瀏覽器中,我們如何實現數據存取呢?
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").name
ele.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").name
ele.find('span').append(reset)
})
</script>
</body>
</html>