jQuery API の jQuery . data( element, key, value ) は、elementに指定したDOM要素と任意のデータ（keyとvalue）を関連付けるメソッド。
data( key, value ) メソッドを使った方が便利なことが多い。
引数
- element
データを関連付けるDOM要素。
- key
データのキー。
文字列。
- value
新しいデータの値。
文字列やオブジェクトなどで指定。
戻り値
- Object
オブジェクト。
記述方法
jQuery . data( 要素, キー, 値 )
「要素」にマッチしたDOM要素に、「キー」と「値」のデータを関連付ける。
記述例
jQuery . data( div, 'area', 'tokyo' )
div要素に、キーが「area」で、値が「tokyo」のデータを、関連付ける。
jQuery . data( div, 'score', { mathematics: 85, science: 70 } )
div要素に、データ'score', { mathematics: 85, science: 70 }を関連付ける。
実装例（サンプル）
- 名前：
- 点数
- 数学：
- 科学：
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery. data( this, 'name', '日本太郎' );
} );
jQuery( '#jquery-sample-score' ) . each( function() {
jQuery. data( this, 'score', { mathematics: 85, science: 70 } );
} );
jQuery( '#jquery-sample-name' ) . each( function() {
var name = jQuery. data( this, 'name' );
jQuery( this ) . text ( name );
} );
jQuery( '#jquery-sample-score' ) . each( function() {
var mathematics = jQuery. data( this, 'score' ) . mathematics;
var science = jQuery. data( this, 'score' ) . science;
jQuery( '#jquery-sample-score-mathematics' ) . text ( mathematics );
jQuery( '#jquery-sample-score-science' ) . text ( science );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-name' ) . each( function() {
jQuery. data( this, 'name', '日本太郎' );
} );
jQuery( '#jquery-sample-score' ) . each( function() {
jQuery. data( this, 'score', { mathematics: 85, science: 70 } );
} );
jQuery( '#jquery-sample-name' ) . each( function() {
var name = jQuery. data( this, 'name' );
jQuery( this ) . text ( name );
} );
jQuery( '#jquery-sample-score' ) . each( function() {
var mathematics = jQuery. data( this, 'score' ) . mathematics;
var science = jQuery. data( this, 'score' ) . science;
jQuery( '#jquery-sample-score-mathematics' ) . text ( mathematics );
jQuery( '#jquery-sample-score-science' ) . text ( science );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<ul id="jquery-sample">
<li>名前：<span id="jquery-sample-name"></span></li>
<li>点数
<ul id="jquery-sample-score">
<li>数学：<span id="jquery-sample-score-mathematics"></span></li>
<li>科学：<span id="jquery-sample-score-science"></span></li>
</ul>
</li>
</ul>
<li>名前：<span id="jquery-sample-name"></span></li>
<li>点数
<ul id="jquery-sample-score">
<li>数学：<span id="jquery-sample-score-mathematics"></span></li>
<li>科学：<span id="jquery-sample-score-science"></span></li>
</ul>
</li>
</ul>