从非 HTML5 浏览器访问数据标签答案

【问题标题】：Accessing data tag from a non HTML5 browser从非 HTML5 浏览器访问数据标签
【发布时间】：2012-04-02 16:55:15
【问题描述】：

我是网络领域的菜鸟，我最近一直在学习 jQuery。我担心的是，如果我的浏览器不支持 HTML5，我能否使用我的 HTML 中的 jQuery 访问“data”属性？

【问题讨论】：

就我而言，您可以在任何浏览器中使用 html 5 的 data 属性，我知道即使是 Internet Explorer 现在也应该有问题，因为 IE 忽略了它不知道如何使用的所有属性渲染或使用。看到这个帖子stackoverflow.com/questions/2412947/…

标签： jquery html

【解决方案1】：

是的。但如果您的浏览器不支持 HTML5，data-attribute 是无效的 (X)HTML。但是，这应该不是使用 jQuery 访问数据的问题。

【讨论】：

【解决方案2】：

是的，您可以使用 data 属性，即使浏览器不支持 HTML5，您也可以使用 jQuery 访问它：

var value = $('#foo').data('value');

你在哪里：

<div id="foo" data-value="bar">Baz</div>

唯一的问题是data 属性无效，如果您的 DOCTYPE 不是 HTML5 => 如果您尝试在 HTML 4.01 Transitional 中使用它，例如验证器会哭闹，但您的网站可以正常运行。

【讨论】：

【解决方案3】：

您可以使用.attr 来访问它：

$(your_selector).attr('data-foo');

【讨论】：

感谢@xdazz 的回复
可以，但不应该，尤其是在操作数据而不是读取数据时。使用attr()，数据将返回到 DOM。与data() 分开保存。如果你用attr() 改变一个值，然后用data() 读取它，你会得到不同的值。 attr() 也只处理字符串，data() 将转换为本机类型，如整数。不管你做什么，除非你真的知道你在做什么，否则不要混合使用attr() 和data()。我的经验法则是使用 attr() 读取原始 DOM 元数据或更改 DOM 属性，并使用 data() 获取应用程序状态。