jQuery の data() メソッドを使用して HTML5 カスタム属性 data-*example

jQuery の data() メソッドを使用して HTML5 カスタム属性 data-*example_jquery を読み取る

WBOY

リリース： 2016-05-16 16:52:37

オリジナル

1050 人が閲覧しました

主なメソッドは次のとおりです。

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

jQuery 1.4.3 以降、HTML 5 の data- 属性データオブジェクト内の jQuery が自動的に参照されます。
HTML の例:

コードをコピーコードは次のとおりです:

/div>

次の jQuery コードは true を返します:

コードをコピーコードは次のとおりです:

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

HTML5 API とは異なります, jQuery は文字列を JavaScript 値 (ブール値、数値、オブジェクト、配列、null を含む) に変換しようとします。そうしても値の表現が変わらない場合、値は数値に変換されます。たとえば、「1E02」と「100.000」は数値 (数値 100) に相当しますが、変換すると表現が変わるため、文字列として保持されます。文字列値「100」は数値 100 に変換されます。

データ属性がオブジェクト (「{」で始まる) または配列 (「[」で始まる) の場合、jQuery.parseJSON を使用して文字列に解析できます。有効な JSON の構文に従う必要があります。プロパティ名を二重引用符で囲みます。値を JavaScript 値として解析できない場合は、文字列として保持されます。

取得した属性値をそのまま文字列として使用したい場合は、attr()メソッドを使用してください。
このデータ属性を最初に使用した後は、データ属性にアクセスしたり変更したりすることはできません (すべてのデータ値は jQuery の内部に保存されます)。
パラメーターなしで .data() を呼び出すと、すべてのデータが JavaScript オブジェクトの形式で取得されます。新しいオブジェクトが抽出されると、その後の要素に対する .data(obj) 操作はこのオブジェクトに影響を与えなくなるため、このオブジェクトは変数に安全に格納できます。さらに、このオブジェクトを直接操作する方が、毎回 .data() を呼び出して値を設定または取得するよりも高速です。