繁星——jquery的data()方法

时间：2023-03-09 16:15:16
繁星——jquery的data()方法

　　今天在看JQuery文档的时候偶然看到了data()方法，觉得挺好用的，这里做个记录。

　　这个方法用于在元素上存放数据,返回jQuery对象。在文档中提到V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据。这个方法的用法如下：

　　（1）在一个div上存取数据

 //HTML代码：

 <div></div>

 //JQuery代码：

 $("div").data("blah");  // undefined

 $("div").data("blah", "hello");  // blah设置为hello

 $("div").data("blah");  // hello

 $("div").data("blah", 86);  // 设置为86

 $("div").data("blah");  //  86

 $("div").removeData("blah");  //移除blah

 $("div").data("blah");  // undefined

　　（2）在div上存取键值对

 //HTML代码：

 <div></div>

 //JQuery代码：

 $("div").data("test", { first: 16, last: "pizza!" });

 $("div").data("test").first  //16;

 $("div").data("test").last  //pizza!;

　　这个方法用来在前端存取数据看起来很方便，实际使用时还需注意以下问题：

　　（1）如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

　　（2）当使用.data()获取值时，jQuery会首先尝试将获取的字符串值转化成JS类型，包括布尔值，null，数字，对象，数组： 
　　　　　　若值是”true|false”，则返回相应的布尔值； 
　　　　　　若值是”null”，则返回null； 
　　　　　　若值是纯数字构成的字符串（+data + ”” === data），则返回相应的数字（+data）； 
　　　　　　若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，则尝试使用jQuery.parseJSON解析之； 
　　　　　  否则返回字符串值。

　　那么，若想获取字符串值而不想获得自动转换的值，可以使用.attr(“data-”+key)来获取相应的值，代码示例如下：

1 var bieh = $(div).attr(“data-”+bieh)

相关文章