一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery.data() 函数使用详解

时间:2022-06-25 17:35:25 编辑:袖梨 来源:一聚教程网


一、jquery data()的作用

data() 方法向被选元素附加数据,或者从被选元素获取数据。
通过data()函数存取的数据都是临时数据,一旦页面刷新,之前存放的数据都将不复存在。
该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据,请使用 removeData() 函数。
 
二、jquery data的使用方式
 
1、获取附加的data的值
$(selector).data(name)
参数说明
 name:
可选。规定要取回的数据的名称。
如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。
 
2、用name和value为对象附加数据
$(selector).data(name,value)
参数说明
selector:为需要附加或者获取数据的对象。
name:参数为数据的名称。
value:参数为数据的值。
 
3、使用对象向元素附加数据
使用带有名称/值对的对象向被选元素添加数据。
除了以提供 name 和 value 的方式进行赋值,我们还可以直接传入另一个对象( “another” )作为参数。这种情况下,“another” 的属性名称和属性值将被视为多个键值对,从中提取的 “name” 和 “value” 都会被复制到目标对象的缓存中。
 
$(selector).data(object)
参数说明
object:必需。规定包含名称/值对的对象。

实例
 











示例&说明

以下面这段HTML代码为例:


   

       

               
  • item1

  •            
  • item2

  •            
  • item3

  •        

   
 

我们编写如下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] + "
");  
}
/*输出:
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]

热门栏目