使用 HTML5 和 jQuery 簡易存取資料

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 資料，方便運用在前後端的存取。