jQueryで要素を指定する際、IDやクラス以外で選択したい場合に便利。

data属性は下記の通り、ハイフン以降に任意の文字列を設定することで利用できる。

<div data-hoge="huga">piyo</div>

例えば上記の「data-hoge」属性にアクセスしたい場合は下記の記述でアクセスが可能。

$('div').data('hoge');

また以下のように、data属性に対しオブジェクトを代入することで複数の値を一度に管理できる。

<div data-info='{"my":"banana","favorite":"apple","fruit":"orange"}'>自己紹介</div>

アクセスする際は下記の通り。

$('div').data('info').my;
$('div').data('info').favorite;
$('div').data('info').fruit;

そして最後にjQuery側からdata属性を設定する方法。
これは普通にattr()関数を用いて設定すればよい。

$('div').attr({
    'data-hoge': 'huga',
    'data-info': '{"my":"banana","favorite":"apple","fruit":"orange"}'
});