jQueryでHTML5の独自データ属性（data Attributes）を扱う

※jQuery1.5を使用しています。

data属性のマークアップ

data属性は「data-」以降に文字列を指定することで設定できます。
たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。

html

 
	<div data-role="hoge">太郎</div>
	

jQueryでこの「hoge」という値を取り出すには、dataメソッドの引数に「data-」以降に設定した文字列を指定します。
ここでは「data-role」と設定したので「role」を指定することになります。

javascript

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

簡単ですね。

複数のdata属性の設定

data属性は同じタグに複数設定することもできます。

html

 
	<div data-role="hoge" data-voice="こんにちワン" data-age="12">太郎</div>
	

複数でもjQueryの記述は変わらないですね。

javascript

 
	$('div').data('role');
	$('div').data('voice');
	$('div').data('age');
	

一つのdata属性に複数の値を設定

オブジェクトを入れれば一つのdata属性に複数の値を設定できます。

html

 
	<div data-role='{"voice":"こんにちワン", "age":"12"}'>太郎</div>
	

jQueryではdata属性の後にオブジェクト名を指定します。

javascript

	$('div').data('role').voice;
	$('div').data('role').age;
	

jQueryでdata属性を設定する

逆にjQueryからdata属性を設定する場合は普通に「attr」メソッドを使用します。

html

 
	<div>太郎</div>
	

javascript

	$('div').attr({ 
		'data-role': 'hoge',
		'data-option': '{"voice":"こんにちワン", "age":"12"}'
	});