Detailed explanation of jQuery.data() function usage

The

data() function is used to access data on all elements matched by the current jQueryobject.

The data accessed through the data() function is temporary data. Once the page is refreshed, the previously stored data will no longer exist.

This function belongs to the jQuery object (instance). If you need to remove the data stored through the data() function, please use the removeData() function.

Syntax

The data() function has the following two uses:

Usage 1:

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

Access data with the specified key name key. If the value parameter is specified, it means that the data with the value of value is stored in the key name; if the value parameter is not specified, it means that the data previously stored in the key name is read; if no parameters are specified, the previous data is returned in the form of an object. All data stored.

Usage 2:

jQueryObject.data( object )

Pass in any number of key-value data in the form of objects at the same time, each of the object Attribute is the key name, and the attribute value is value.

Note: All "store data" operations of the data() function target each element matched by the current jQuery object; all "read data" operations only target the first matched element.

Parameters

Please find the corresponding parameters according to the parameter names defined in the previous syntax section.

Parameter Description

key Optional/Key name specified by String type String.

value Optional/any type Any type of data that needs to be stored.

object Object classThe specified object is used to encapsulate multiple key-value pairs and store multiple data at the same time.

Return value

data()The return value of the function is of any type. The type of the return value depends on whether the current data() function performs the "store data" operation. Or a "read data" operation.

If the data() function performs a "store data" operation, it returns the current jQuery object itself; if it is a "read data" operation, it returns the read data.

If the current jQuery object matches multiple elements, when reading data, the data() function only uses the first matching element.

If the corresponding data cannot be found when executing the data(key) function (only one parameter key is passed in), undefined will be returned. If the corresponding data is not found when executing the data() function (without any parameters), an empty object (without any attributes) is returned.

Example & Description

Take the following HTML code as an example:

<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>

We write the following jQuery code:

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]

The above is the detailed content of Detailed explanation of jQuery.data() function usage. For more information, please follow other related articles on the PHP Chinese website!