jQuery Data

HTML5 新增了 data-* 自定義屬性 (data attributes)，讓我們可以任意讀寫資料在元素上，而且不會影響頁面的 layout。

例如，我們可以像這樣自定義 data 屬性：

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

jQuery 也提供了方便的函式來處理這些綁定在特定元素上的資料。

.data(key)

如何取得元素上的資料？

// HTML
<div data-role="page" data-last-value="43" data-hidden="true"></div>
// jQuery
$('div').data('role') === "page";
$('div').data('lastValue') === 43;
$('div').data('hidden') === true;

你還可以在 data-* 屬性裡使用 JSON 語法

如果 data attribute 的值是 { 或 [ 開頭，jQuery 會自動幫你當 JSON 來解析成 JavaScript Object/Array。

例如

// HTML
<div data-options='{"name":"John"}'></div>
// jQuery
$('div').data('options').name === 'John';

.data(key, value)

除了使用 HTML data-* 屬性，jQuery 也讓我們可以很彈性的綁定任意資料到特定元素上面。

$('#foo').data('foo', 52);
$('#foo').data('bar', {myType: 'test', count: 40});
$('#foo').data({baz: [1, 2, 3]});

$('#foo').data('foo'); // 52
// 也可以一次拿元素上面綁定的所有資料
$('#foo').data(); // {foo: 52, bar: {myType: 'test', count: 40}, baz: [1, 2, 3]}

.removeData([name])

.removeData() 可以用來移除透過 jQuery 綁定在元素上的資料。(但不會刪除 HTML 上的 data-* 屬性)

$('div').data('test1', 'VALUE-1');
$('div').data('test2', 'VALUE-2');

$('div').removeData('test1');
// 沒指定 key 代表刪除這元素上面所有綁定的資料
$('div').removeData();