jQueryではdata()を使ってHTML 5のカスタム属性data-*の例を読み込みます。

主な方法は以下の通りです。

.data( key, value )
.data( obj )
.data( key )
.data()

はjQuery 1.4.3からHTML 5 data-属性が自動的にjQueryのデータオブジェクトに引用されます。例えばHTML：

以下のjQueryコードはtrueに戻ります。

$ ( "div" ) . data ( "role" ) === "page" ;
$ ( "div" ) . data ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;

とhttml 5のappiは違います。jQueryは文字列をJavaScript値（ブール値、数字（numbers）、対象（bject）、配列（arrays）、および空（null）に変換しようとします。このようにすれば、数値の表現は変更されず、その値は1つの数字に変換される。例えば、「1 E 02」と「100.000」は数字に等しいですが、変換すると表現が変わるので、文字列として保存されます。文字列値「100」は、数字100に変換されます。
データ（data）属性がオブジェクト（「スタート」）または配列（「スタート」）の場合、jQuery.parseJSONで文字列に解析できます。二重引用符を有する属性名を含む有効なJSONの文法に従わなければならない。この値がJavaScript値として解析できない場合、文字列として保存されます。
取り出した属性値をそのまま文字列として扱う場合は、atr()を使ってください。data-属性は、このデータ属性を初めて使用してからアクセスまたは変更しない（すべてのデータ値はjQueryの内部に保存されている）。呼び出し.data()の場合はパラメータを持たないとJavaScriptオブジェクトとしてすべてのデータを取得します。このオブジェクトは変数に安全に保存できます。この新しいオブジェクトが抽出されると、要素に対してdata(obj)操作が行われ、このオブジェクトに影響を与えなくなります。また、このオブジェクトを直接操作すると、呼び出しごとに.data()を設定したり、取得したりするよりも少し早いです。