閱讀HTML5的詳細規范后你會發現，這個自定義data屬性的用法非常的簡單，就是你可以往HTML標簽上添加任意以 "data-"開頭的屬性，這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。
jquery 里已經內置這個方法. 通過 $(‘#content‘).data(‘list'); 就能獲取數據. 這個方法是在 jQuery1.4.3版本后出現的,它能返回相應的data屬性.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
//讀取data-*的值
$("li").each(function(v) {
console.log($(this).data('name'));
});
//設置data-*的值
$("li").eq(0).data('name','bryant');
$("li").each(function(v) {
console.log($(this).data('name'));
});
//刪除data-*的值 這里使用的是removeAttr，測試官方的removeData是不起作用的
$("li").eq(0).removeAttr('data-name');
$("li").each(function(v) {
console.log($(this).data('name'));
});
})
</script>
<body>
<ul>
<li data-name="kobe">科比</li>
<li data-name="gasol">加索爾</li>
<li data-name="nash">納什</li>
<li data-name="fisher">費舍爾</li>
</ul>
</body>
</html>
新聞熱點
疑難解答
