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" ; 
  
 
 

html 5のapiとは異なり、jQueryは文字列をJavaScript値(ブール値(booleans)、数値(numbers)、オブジェクト(objects)、配列(arrays)、空(null)を含む)に変換しようとします.これにより数値の表示が変更されない場合、値は数値に変換されます.たとえば、「1 E 02」と「100.000」は数値(数値100)と同じですが、変換すると表示が変更されるので文字列として保持されます.文字列値「100」は、数値100に変換されます.
データ(data)属性がオブジェクト("{"で始まる)または配列('['で始まる)である場合は、jQuery.parseJSONで文字列に解析できます.二重引用符付き属性名を含む有効なJSON構文に従う必要があります.この値がJavaScript値に解析できない場合は、文字列として保持されます.
取り出した属性値を文字列として直接使用する場合はattr()メソッドを使用します.data属性は、このデータ属性を初めて使用した後にアクセスまたは変更されない(すべてのデータ値はjQuery内部に格納される).呼び出しdata()の場合、パラメータを持たないとJavaScriptオブジェクトとしてすべてのデータが取得されます.このオブジェクトは、新しいオブジェクトが抽出されると、その後要素が行うため、変数に安全に格納することができる.data(obj)操作は、このオブジェクトに影響を与えません.また、このオブジェクトを直接操作することは、毎回呼び出すよりも大きい.data()で値を設定または取得するのは速いです.