使用 HTML5 和 jQuery 簡易存取資料

日期：2013.03.09
留言數：1
標籤：HTML5 技巧觀念

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">
  區塊測試
  簡易使用 HTML5 存取資料。
</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 不一樣，點選區塊之後顯示的結果也會不同。