htmlにカスタム属性(data-*)を使って、jQueryで簡単アクセスする

どうも、俺です。

HTMLに独自のカスタム属性をつけて、
jQueryで操作できれば便利ということを発見しました。

カスタム属性を使えば、

<img data-hoge="ほげ" src="xxx.png" />

のように、「data-」のあとに好きな文字列を指定して値をセットできます。
data属性には一応仕様が定められており、
1文字以上のアルファベット、数字、ハイフン、アンダースコアが使えるようです。

で、本題はここから。
設定した「data-hoge」にjQueryを使ってアクセスするには、

$("img").data("hoge");

超簡単！！

data属性にJSONをセットもできるので、

<div data-hoge='{"aaaa":"あいうえお", "bbbb":1000}'>

のように指定しておけば、

$("div").data("hoge").aaa;

でアクセス可能！

ちなみに、data属性は複数も指定できます。

<span data-hoge="ほげ" data-fuga="ふが">

以上でぇぇぇす。