HTML5 增加了一個data-*
的屬性,可以讓大家很方便的存取這些數據,而且完全不會影響你的版面。假使要做網頁互動,或是需要將資料存到後端紀錄,都非常的方便喔!
A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Embedding custom non-visible data with the data-* attributes
範例 1
HTML5 使用data-*
非常簡單,以下是參考語法:
<div class="block" data-myid="test1">
區塊測試<br />
簡易使用 HTML5 存取資料。
</div>
在不影響版面情況下,可以看到我們在<div>
增添了一個屬性:data-myid="test1
。
myid
以及test1
都是我們可以自定義的項目。myid
可以用來當作該 DIV 的識別標記,test1
則是該 DIV 的值。
接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:
var myid= $('.block').data('myid'); //值為 test1
$("#btn_a").click(function(){
alert(myid);
});
按下按鈕後,跳出來的 alert 視窗值會是 test1 。
範例 2
假使有多組 DIV 的值要讓我們做選擇,同樣可以利用data-*
實現該效果。
首先先把 HTML 的 data 寫好:
<div id="block">
<div class="block1" data-myid="no1">請點我,我是編號一</div>
<div class="block1" data-myid="no200">請點我,我是編號二百</div>
</div>
以及利用 jQuery 取出data-myid
的值
$('#block .block1').click(function(){
alert($(this).attr("data-myid"));
});
兩個 DIV 的data-myid
不一樣,點選區塊之後顯示的結果也會不同。
簡單的存取 HTML DATA 資料,方便運用在前後端的存取。