为什么jQuery.data()修改HTML5 data-x属性值?

时间:2011-09-30 17:53:33

标签: jquery

我刚刚在jQuery 1.6.2中遇到了一些非常令人不安的行为,希望有人能解释一下。鉴于以下标记...

<div id="test" data-test="    01">Test</div>

有人可以告诉我为什么通过.data()访问该属性会导致它被解析为int吗?

var t = $("#test").data("test");
alert(t);  // shows "1"

t = $("#test").attr("data-test");
alert(t);  // shows "    01"

我当然有proof on jsFiddle这种行为。

3 个答案:

答案 0 :(得分:7)

来自data(key)的文档:

  

每次尝试都将字符串转换为JavaScript值   (否则,这包括布尔值,数字,对象,数组和null)   它留下了一个字符串。

由于您的示例字符串可以转换为数字,因此它是。

编辑正如约瑟夫所指出的,这仅适用于直接从元素中读取数据,就像您在此示例中所做的那样。如果你可以先设置它(即在阅读之前data(key,value)),那么行为就会消失。当从实际DOM元素读取时,getter执行类型强制。

答案 1 :(得分:0)

jQuery人说:

从jQuery 1.4.3开始,HTML 5数据属性将自动引入jQuery的数据对象。在jQuery 1.6中改变了嵌入破折号属性的处理,以符合W3C HTML5规范。

每次尝试都将字符串( html5数据属性值)转换为JavaScript值(包括布尔值,数字,对象,数组和null),否则将其保留为字符串。要将值的属性检索为字符串而不尝试转换它,请使用attr()方法。

从此页面:http://api.jquery.com/data/

答案 2 :(得分:0)

要添加Paul Equis的答案,

如果要以字符串形式访问它,请使用.attr()方法。

var t = $("#test").attr("data-test");

编辑:这是一个演示,展示了jQuery解释数据属性的一个好处。

http://jsfiddle.net/FzmWa/1/