诡异的jquery data()方法--data()使用无效的原因

大家都知道$(‘’).data()能获取或操作DOM上的data-*属性值，但我在使用过程中并不止一次发现有时候data()方法是无法获取属性值(undefine)或获取不正确的，而使用attr()方法就能正常使用。所以大家在使用data()无效时，就只能改用attr()吧。

这里我们看下data和attr的工作过程，可能能找出原因：

1
2
<a id="a" data-xxx="00123" /> 
alert($('#a').data('xxx')); //'123'

没错，这段代码输出的是'123'，再看看下面这段，估计就清楚多了:

1
2
3
4
5
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 
$("div").data("role");         //"page"; 
$("div").data("lastValue");    //43; 
$("div").data("hidden");       //true; 
$("div").data("options").name; //"John";

即当使用.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)来获取相应的值。


欢迎大家转载，请注明出处：
Doterlin's Blog https://doterlin.github.io/blog/2016/03/31/data/

">