jQuery.data()関数の使い方の詳しい説明

data() 関数は、現在の jQueryオブジェクト に一致するすべての要素のデータにアクセスするために使用されます。

data() 関数を通じてアクセスされるデータは一時的なデータであり、ページが更新されると、以前に保存されていたデータは存在しなくなります。

この関数はjQueryオブジェクト(インスタンス)に属します。 data() 関数を通じて保存されたデータを削除する必要がある場合は、removeData() 関数を使用してください。

Syntax

data() 関数には次の 2 つの用途があります:

用途 1:

jQueryObject.data([ key [, value ] ])

指定されたキー名 key でデータにアクセスします。 value パラメータが指定されている場合は、value の値を持つデータがキー名に格納されることを意味し、value パラメータが指定されていない場合は、パラメータが指定されていない場合はキー名に以前に格納されたデータが読み取られることを意味します。指定すると、以前のデータがオブジェクトの形式で返され、すべてのデータが保存されます。

使用法 2:

jQueryObject.data(object)

オブジェクトの各 attribute は、キー名と属性値です。値です。

注: data() 関数のすべての「データの保存」操作は、現在の jQuery オブジェクトによって一致する各要素に対して行われます。すべての「データの読み取り」操作は、最初に一致した要素に対してのみ行われます。

パラメータ

前の構文セクションで定義されたパラメータ名に従って、対応するパラメータを見つけてください。

パラメータの説明

key String型で指定されたオプション/キー名string。

値 オプション/任意のタイプ 保存する必要がある任意のタイプのデータ。

オブジェクトオブジェクトクラス指定されたオブジェクトは、複数のキーと値のペアをカプセル化し、複数のデータを同時に保存するために使用されます。

戻り値

data()関数の戻り値は、現在のdata()関数が「データの保存」操作を実行するか「データの読み取り」操作を実行するかによって異なります。手術。

data() 関数が「データの保存」操作を実行する場合は、現在の jQuery オブジェクト自体を返します。「データの読み取り」操作の場合は、読み取ったデータを返します。

現在の jQuery オブジェクトが複数の要素に一致する場合、データを読み取るときに、data() 関数は最初に一致した要素のみを使用します。

data(key)関数実行時に対応するデータが見つからなかった場合(パラメータキーが1つだけ渡された場合)、unknownが返されます。 data() 関数 (パラメータなし) の実行時に対応するデータが見つからない場合は、空のオブジェクト (属性なし) が返されます。

例と説明

次の HTML コードを例として取り上げます:

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

次の jQuery コードを書きます:

var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
//  返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer
// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
    document.writeln( i + "=" + obj[i] + "<br>");   
}
/*输出：
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/
//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined
document.writeln( $li.data("name") ); // undefined
var object = { 
        name: "张三",
        age: 18,
        score: [87, 23, 56],
        options: { gender: "男", address: "水帘洞" }
    };
// 同时向所有的div元素以对象形式设置多个key-value数据
// value值可以是任意类型的数据，包括数组、对象等
$("div").data( object );
var $n2 = $("#n2"); // 通过n1、n2都可以读取数据
document.writeln( $n2.data("name") ); // 张三
document.writeln( $n2.data("score") ); // 87,23,56
document.writeln( $n2.data("options") ); // [object Object]

以上がjQuery.data()関数の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。