添加自定义属性答案

【问题标题】：Adding custom attributes添加自定义属性
【发布时间】：2012-07-10 09:00:04
【问题描述】：

在我正在创建的一个相当复杂的 HTML5 webapp 中，我发现向一些文档元素添加一些自定义属性很方便。使用 jQuery，我发现我可以毫无问题地检索这些属性 - 到目前为止，在 Chrome、Safari 和 Firefox 中，我希望在 Android/iPhone 移动浏览器上也是如此。

问题 - 是这样的用法，注入自定义属性，好的还是我会打破一些东西。为了让事情进入上下文，我使用 jQuery Mobile，带有 jQuery 和一些 jQuery 插件。

在相关说明中，我假设可以使用 jQuery 检索具有指定属性的所有元素？

【问题讨论】：

以data-为前缀：html5doctor.com/html5-custom-data-attributes
谢谢！我想我一直在 jQuery Mobile 中看到这一点，却没有意识到它的含义。就像我几个小时前所说的那样——这是一个多么棒的小论坛啊！从问题到答案的秒数。

标签： html attributes custom-attributes custom-data-attribute

【解决方案1】：

我建议不要使用自定义属性，而是使用数据属性，您可以在 HTML5 Doctor Website 上阅读。

本质上，您可以为元素提供以data- 为前缀的自定义属性，并且您可以使用 jQuery 读取/设置这些属性。这是一个例子：

HTML5 sn-p：

<p id="porky" data-food="bacon">Porky was a tasty little piggy</p>

jQuery sn-p:

alert( $('#porky').data('food') ); // Alerts "bacon"
$('#porky').data('food', 'roast');
alert( $('#porky').data('food') ); // Alerts "roast"

使用 data-attributes 将创建一个有效的、面向未来的应用程序。

【讨论】：

【解决方案2】：

你可以使用data-属性：

<div data-someattr="1" data-someotherattr="'1'" data-obj="{prop:'val1'}" ....

通过jQuery.data()检索那些：

$('div').data('someattr')           //1      Number
$('div').data('someotherattr')      //'1'    String
$('div').data('obj').prop          //'val1' String

【讨论】：

谢谢！能够将对象包装到属性中非常简单