https://api.jquery.com/jQuery.data/ の日本語訳。
カテゴリー: Data | Utilities
指定された要素に関連付けられた任意のデータを保存するか、設定された値を返します。
jQuery.data( element, key, value )
戻り値: Object
説明: 指定された要素に関連付けられた任意のデータを格納します。設定された値を返します。
追加されたバージョン: 1.2.3
-
element
Type: Element
データに関連付ける DOM 要素。 -
key
Type: String
設定するデータに名前を付ける文字列。 -
value
Type: Anything
新しいデータ値。これは、undefined以外の任意の JavaScript タイプにすることができます。
注: これは低レベルの方法です。より便利な .data() も使用できます。
jQuery.data() メソッドを使用すると、循環参照から安全な方法で DOM 要素に任意のタイプのデータをアタッチできるため、メモリリークが発生しません。
jQuery は、 jQuery メソッドを介して DOM 要素が削除されたとき、およびユーザーがページを離れたときに、データが確実に削除されるようにします。
単一の要素にいくつかの異なる値を設定し、後でそれらを取得できます。
jQuery.data( document.body, "foo", 52 );
jQuery.data( document.body, "bar", "test" );
その他の注意事項:
Internet Explorer では、 expando プロパティを介したデータの添付が許可されていないため、現在、このメソッドは XML ドキュメントにデータを設定するためのクロスプラットフォームサポートを提供していません。
undefined はデータ値として認識されません。
jQuery.data(el, "name", undefined) などの呼び出しは、 "name" に対応するデータを返すため、 jQuery.data(el, "name") と同じです。
例: 保存してから、 div 要素から値を取得します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
The values stored were <span></span> and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {first: 16, last: "pizza!"} );
$( "span" ).first().text( jQuery.data( div, "test" ).first );
$( "span" ).last().text( jQuery.data( div, "test" ).last );
</script>
</body>
</html>
jQuery.data( element, key )
戻り値: Object
説明: jQuery.data(element, name, value) によって設定された要素の名前付きデータストアの値、または要素の完全なデータストアを返します。
追加されたバージョン: 1.2.3
-
element
Type: Element
データを照会する DOM 要素。 -
key
Type: String
保存されているデータの名前。
jQuery.data( element )
追加されたバージョン:1.4
- element
Type: Element
データを照会する DOM 要素。
注: これは低レベルの方法です。より便利な .data() も使用できます。
HTML5 の data-* 属性について:この低レベルのメソッドは、より便利な .data() メソッドが既に取得していない限り、 data-* 属性を取得しません。
jQuery.data() メソッドを使用すると、循環参照から安全な方法で DOM 要素に任意のタイプのデータをアタッチできるため、メモリリークが発生しません。
単一の要素の複数の異なる値を一度に 1 つずつ、またはセットとして取得できます。
alert( jQuery.data( document.body, "foo" ) );
alert( jQuery.data( document.body ) );
上記の行は、 body 要素に設定されたデータ値を警告しています。
その要素に何も設定されていない場合は、空の文字列が返されます。
jQuery.data(element) を呼び出すと、要素に関連付けられたすべての値が JavaScript オブジェクトとして取得されます。
jQuery 自体がこのメソッドを使用して、イベントハンドラーなどの内部で使用するデータを格納するため、独自のコードが格納したデータのみが含まれているとは限りません。
注: Internet Explorer では、 expando プロパティを介したデータの添付が許可されていないため、現在、このメソッドは XML ドキュメントにデータを設定するためのクロスプラットフォームサポートを提供していません。
例: 要素に保存されている "blah" という名前のデータを取得します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
margin: 5px;
background: yellow;
}
button {
margin: 5px;
font-size: 14px;
}
p {
margin: 5px;
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
<script>
$( "button" ).click(
function () {
var value, div = $( "div" )[ 0 ];
switch ( $( "button" ).index( this ) ) {
case 0: value = jQuery.data( div, "blah" );
break;
case 1: jQuery.data( div, "blah", "hello" );
value = "Stored!";
break;
case 2: jQuery.data( div, "blah", 86 );
value = "Stored!";
break;
case 3: jQuery.removeData( div, "blah" );
value = "Removed!";
break;
}
$( "span" ).text( "" + value );
} );
</script>
</body>
</html>