jQuery 是否在内部将 HTML5 数据属性键转换为小写？答案

【问题标题】：Does jQuery internally convert HTML5 data attribute keys to lowercase?jQuery 是否在内部将 HTML5 数据属性键转换为小写？
【发布时间】：2014-01-08 01:07:55
【问题描述】：

我正在尝试使我的 JavaScript 编码风格尽可能地符合我的 Zend 编码风格，它使用的是 camelCase。因此，在我的 HTML5 数据属性中，我将它们命名为如下示例：

<button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button>
<div id="users" data-reloadRequest="/user/index"> ... </div>

利用 Jquery 执行操作的相当不显眼的方式，但是当我调用 $('.action').data() 时，属性名称会转换为小写。

有什么解决方法吗？

我从来没有想过 JavaScript 变量中应该有破折号，我不明白为什么 jQuery 在内部为我做这个？或者可能是 HTML5？

【问题讨论】：

不要对你的 html 标记进行驼峰式命名。在标记中使用破折号（例如data-action-method 而不是data-actionMethod），它将被正确转换
不将大写字母添加到自定义数据属性名称中的 MDN 参考 - "the name must not contain capital A to Z letters."

标签： javascript jquery html

【解决方案1】：

如果你使用

data-action-method="delete"

然后您可以使用

访问该属性

$('.action').data('actionMethod')

这是HTML5 DOM API的一部分：

自定义数据属性转换为键具有以下规则的 DOMStringMap 条目：

任何破折号 (U+002D) 都会被删除；

破折号 (U+002D) 后面的任何字母在删除之前都设置为大写字母。

【讨论】：

太棒了！谢谢，很简单。当然让我觉得自己像个新手，不知道这么琐碎的事情。
@Michael：别担心，我真的不希望有人知道这一点。当我第一次尝试以.data('foo-bar') 访问该属性时，我确实感到困惑；）
这太令人困惑了！改变大小写是出乎意料的行为（对我来说）。
@Jowen：我不会感到困惑。这是有道理的，但确实必须查一下。
感谢您的回答，我只是用这个把头撞在墙上。但是我不禁想知道为什么有人会在规范中包含如此荒谬的东西。就好像他们在捉弄我们。

【解决方案2】：

首先，请参阅 JQuery 源代码的this part，它假定您具有小写属性。

其次，按照惯例，所有 HTML5 属性都应为小写，请参阅：http://www.htmlbasictutor.ca/html-tag-attributes.htm

最后请注意，如果你坚持使用大写字母可能会遇到更多问题，请参阅Django: Unable to add UPPERCASE attribute name in HTML input element

【讨论】：