プロパティ値をDOM要素に直接格納することは、メモリリークの可能性があるため危険です。とにかくjQueryを使用している場合、この.data()
メカニズムは要素ごとの情報を追跡するための素晴らしく安全な方法です。文字列だけでなく、任意のJavaScriptデータ構造を保存することもできます。
編集— HTMLマークアップにdata-foo
属性が含まれている場合、キーにアクセスするとそれらが暗黙的に読み取られます。つまり、HTMLが次のようになっている場合:
<div id="div1" data-purpose="container">
次に、jQueryで:
alert( $('#div1').data('purpose') ); // alerts "container"
さらに、jQueryは属性値の「スマート」分析も行います。値が数値のように見える場合、jQueryは文字列ではなく数値を返します。JSONのように見える場合は、JSONを逆シリアル化します。
編集—ここに良いトリックがあります:Chrome開発者コンソール(「コンソール」ビュー)で、JavaScript式を入力してそれらを評価させることができます。評価は常に、作業中のページのコンテキストで行われます。[要素]ビューから要素を選択すると、コンソールでJavaScriptシンボル$0
がその選択されたDOM要素を参照します。したがって、コンソールに移動して次のように入力することで、要素の「データ」マップをいつでも調べることができます。
$($0).data("something");
この.data()
関数は、パラメーターなしで呼び出された場合、すべてのキーと値のペアを返します。
$($0).data();