jQuery.data() 日本語訳

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()](https://api.jquery.com/data/) も使用できます。

``jQuery.data()`` メソッドを使用すると、循環参照から安全な方法で DOM 要素に任意のタイプのデータをアタッチできるため、メモリリークが発生しません。
jQuery は、 jQuery メソッドを介して DOM 要素が削除されたとき、およびユーザーがページを離れたときに、データが確実に削除されるようにします。
単一の要素にいくつかの異なる値を設定し、後でそれらを取得できます。

```js
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 要素から値を取得します。

```html
<!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()](https://api.jquery.com/data/) も使用できます。

HTML5 の ``data-*`` 属性について:この低レベルのメソッドは、より便利な ``.data()`` メソッドが既に取得していない限り、 ``data-*`` 属性を取得しません。

``jQuery.data()`` メソッドを使用すると、循環参照から安全な方法で DOM 要素に任意のタイプのデータをアタッチできるため、メモリリークが発生しません。
単一の要素の複数の異なる値を一度に 1 つずつ、またはセットとして取得できます。

```js
alert( jQuery.data( document.body, "foo" ) );
alert( jQuery.data( document.body ) );
```

上記の行は、 body 要素に設定されたデータ値を警告しています。
その要素に何も設定されていない場合は、空の文字列が返されます。

``jQuery.data(element)`` を呼び出すと、要素に関連付けられたすべての値が JavaScript オブジェクトとして取得されます。
jQuery 自体がこのメソッドを使用して、イベントハンドラーなどの内部で使用するデータを格納するため、独自のコードが格納したデータのみが含まれているとは限りません。

注: Internet Explorer では、 expando プロパティを介したデータの添付が許可されていないため、現在、このメソッドは XML ドキュメントにデータを設定するためのクロスプラットフォームサポートを提供していません。
    
例: 要素に保存されている "blah" という名前のデータを取得します。

```html
<!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>
```