jQuery 的 data() 与 attr() 使用，data() 为何无效？

jQuery 的 data() 方法

HTML 元素可以自定义属性，一般约定以“data-”开头（你不这么约定也行，但是那样就用不到 jQuery 的 data() 了）。

jQuery 的 data() 可以方便取值并转换类型。

<div data-b="true"     data-n="0.3" data-s="cftea" data-j='{ "p1" : "v1" }'> </div> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script type="text/javascript"> <!-- var b = $("div").data("b"); // 遇值为 true、false（注意大小写），自动转换成布尔类型。 var n = $("div").data("n"); // 遇数字，自动转换为数字类型。 var s = $("div").data("s"); // 字符串类型。 var j = $("div").data("j"); // 遇 JSON 格式，自动转换成 JSON 类型。 alert(b == true); // true alert(n > 1); // false alert(s); // cftea alert(j.p1); // v1 //--> </script>

可以自动判断值格式并转换类型，注意 JSON 的话，由于内部有双引号，所以外部就用单引号。

jQuery 的 attr() 方法

如果不想自动转换类型，就可以用 attr() 方法，这时要把“data-”写出来。

alert($("div").attr("data-j"));

DOM 值改变导致 jQuery 的 data() 方法无效

data() 一旦使用，则与 DOM 断开了，HTML 改变值、data() 赋值，都不会影响对方，请参见：jQuery 的 data() 并不会改变 DOM 值。

大小写导致 jQuery 的 data() 方法无效

有时我们发现取出来的值是 undefined，为什么呢？原来 data() 参数不允许含大写字母，搞不懂 jQuery 为什么要这么干，难道是属性名称得小写的原因？

• data-a="cftea"：能用 data("a") 取值

• data-a1="cftea"：能用 data("a1") 取值

• data-B="cftea"：不能用 data("B") 取值，但可用 data("b") 取值。

attr() 则参数名称忽略大小写。

总结

• data() 参数必须省略 "data-"；attr() 不能省略。

• data() 参数不能有大写，如果 HTML 中是大写，参数中换为小写即可；attr() 随便大写小写都可以。

• data() 自动转换值类型；attr() 不会。