2017/10/27 data() 前端存取数据

今天说一说用jQuery的data() 数据存取函数。

之所以要记录这个，是因为我看文档的时候写了一个小例子，结果控制台输出的却是undefined，后来拿别人的例子来试验还是不行。网上也找不到原因。后来才发现是jQuery版本的问题。额。。。很低级的错误了。但是感觉值得记录一下。

1、先说说基本的存取数据吧

<div class='box'></div>

      1）存数据

$('.box').data('test','test word');

存完数据就要取出来用嘛！

      2) 取数据

$('.box').data('test');// console.log() 输出 test word;

      3) 删除数据

$('.box').removeData('test');

console.log($('.box').data('test'));  //undefined

2、再说说我遇到问题的地方吧

<div class='box' data-test='test'></div>

$('.box').data('test');  //输出  undefined，实际应该输出test

这是用data() 函数取用h5的data-*属性，本来是段很简单的代码，却出了问题。后来想想会不会是jQuery版本的问题，因为我的jQuery是直接放在本地的，忘记从哪里下载的，后来引用换成百度cdn的jq就好了。果然是！此处黑线。。。

然后我就试验了一下各个版本的支持情况，结果如下：

1.2.3和1.3.2版本  不支持   输出 undefined，

1.4.2版本              不支持   输出 null

1.4.4到1.7.2版本   支持       但是数字会转化 // 00123  会输出 123 类型number

1.8.3版本及以上    支持       数字智能输出  //00123输出为 00123 类型string  123 //输出123 类型number

3、注意事项

data-* 自定义的属性名称有大写的话也是会输出 undefined 的，不管哪个版本都是。

因为如果属性名中有大写，chrome浏览器会自动转换为小写。（所以可以在data函数中直接用小写名称）

如果使用jquery的data()方法存数据，则不会有这个问题