HTML5新增屬性data-*和js/jquery之間的交互

HTML5新增屬性data-*

data-*自定義屬性,這種方式的自定義屬性解決屬性混亂無狀態管理的現狀

書寫實例

<div data-role="page"
	 data-last-value="43"
	 data-hidden="true"
	 data-options='{"name":"John"}'>
</div>

1. 定義:

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

2. 注意點:

data-* 屬性包括兩部分：

• 屬性名不應該包含任何大寫字母，並且在前綴 "data-" 之后必須有至少一個字符
• 屬性值可以是任意字符串

data-*屬性和jQuery交互

使用jQuery中的.data()函數取用data-*屬性值

console.log($("div").data('lastValue'));  //輸出的值為:43
console.log($("div").data('role'));  //輸出的值為:page

注意事項

1. data-**屬性名格式駝峰命名改寫

2. data-屬性是在第一次使用這個數據屬性后不再存取或改變（所有的數據值都在jQuery內部存儲）

    演示:
    	console.log($("div").data('lastValue'));  //輸出的值為:43
    	$('div').data('lastValue',44);  //設置data-last-value=44
    	$('div')[2]  //假設這是文檔中的第3個div,我們輸出這個dom
    	//輸出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>