jQuery 2.2.3中data()获取data-queryURL属性返回undefined的问题

为什么会出现这个差异？ #

这是HTML属性的大小写特性和jQuery .data()方法的命名转换规则共同作用的结果：

1. HTML属性不区分大小写：浏览器会自动把你写的data-queryURL转换成全小写的data-queryurl——因为HTML规范里属性名是大小写不敏感的，不管你写的是大写还是混合大小写，最终都会被统一处理为小写。
2. jQuery .data()的驼峰转换逻辑：.data()方法在读取原生data属性时，会先去掉data-前缀，再把属性名转换为小驼峰命名。但对于全小写的data-queryurl，没有连字符可以触发大写转换，所以最终存储的键名是queryurl。当你调用.data('queryURL')时，jQuery会去匹配键名queryURL，和实际存储的queryurl不匹配，自然返回undefined。

而.attr('data-queryURL')能正常获取值，是因为.attr()是直接读取DOM属性，它不做任何命名转换，只要属性名（大小写不敏感）匹配就能拿到结果。

解决方法 #

你可以根据需求选择以下任意一种方案：

• 方案1：遵循HTML5规范修改属性名
  把HTML里的data-queryURL改成符合规范的小写连字符形式：

  <div class="typeahead" data-minLength="1" data-query-url="url"></div>
  

  然后用对应的小驼峰名称读取：

  console.log(jQuery('.typeahead').data('queryUrl')); // 输出 "url"
  

• 方案2：使用全小写的键名读取
  如果你不想修改HTML，可以直接用全小写的键名调用.data()：

  console.log(jQuery('.typeahead').data('queryurl')); // 输出 "url"
  

• 方案3：继续使用.attr()读取
  如果你不需要jQuery的data缓存功能，也可以保持原代码用.attr()直接读取DOM属性：

  console.log(jQuery('.typeahead').attr('data-queryURL')); // 输出 "url"
  

内容的提问来源于stack exchange，提问作者Giacomo M