http://d.hatena.ne.jp/Naotsugu/20111007/1317994886
http://memo.yomukaku.net/entries/136
HTML4以前は正式な仕様としては、htmlタグに本来存在しない属性を埋め込むことは禁止されていた。
しかし、HTML5で"data-"というプレフィクスを持つ属性はユーザが自由に埋め込んでも問題ないことになった。
また、この属性はjQuery.data()によって扱う事ができる。(jQuery1.4.4以降)
例: <span data-short="short name">long name</span> <script> $("span").click(function(){ $(this).text( $(this).data().short ); // $(this).data("short") でもok // もちろん $(this).attr("data-short") でも扱える }); </script>
http://www.webopixel.net/javascript/414.html
さらに、カスタムデータ属性の値としてjsonを入れておくと、jQueryは勝手にオブジェクトに展開してくれる。
<div data-role='{"voice":"こんにちワン", "age":"12"}'>太郎</div> $('div').data('role').voice;
http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/html5-data-attributes-vs-jquery-data-api/