总结jQuery中$.data()用法注意事项

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了总结jQuery中$.data()用法注意事项，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2396字，纯文字阅读大概需要4分钟。

内容图文

前段时间同事在群里对jQuery里的.data()方法大发牢骚：
XXX(NNNNNNN) 15:11:34
<a id="a" data-xxx="00123" />
alert($('#a').data('xxx'));//123
data方法不靠谱
XXX(NNNNNNN) 15:13:17
老老实实用attr('data-xxx')吧细研究了下jQuery文档对.data()方法的描述：

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.
The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5
specification.

针对如下示便：

<p data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></p> 
$("p").data("role") === "page"; 
$("p").data("lastValue") === 43; 
$("p").data("hidden") === true; 
$("p").data("options").name === "John";

即当使用.data()获取值时，jQuery会首先尝试将获取的字符串值转化成JS类型，包括布尔值，null，数字，对象，数组：
若值是”true|false”，则返回相应的布尔值；
若值是”null”，则返回null；
若值是纯数字构成的字符串（+data + ”” === data），则返回相应的数字（+data）；
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，则尝试使用jQuery.parseJSON解析之；
否则返回字符串值
当然文档里也特意说明了——如果就是想获取字符串值而不想获得自动转换的值，可以使用.attr(“data-”+key)来获取相应的值：

To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

如下为jQuery源码

function dataAttr( elem, key, data ) { 
// If nothing was found internally, try to fetch any 
// data from the HTML5 data-* attribute 
if ( data === undefined && elem.nodeType === 1 ) { 
// rmultiDash = /([A-Z])/g 
var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); 
data = elem.getAttribute( name ); 
if ( typeof data === "string" ) { 
try { 
/*.data(key)方法尝试将获取的值转化成JS类型，包括布尔值，null，数字，对象，数组*/ 
data = data === "true" ? true : 
data === "false" ? false : 
data === "null" ? null : 
// Only convert to a number if it doesn't change the string 
+data + "" === data ? +data : 
/*rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,*/ 
rbrace.test( data ) ? jQuery.parseJSON( data ) : 
data; 
} catch( e ) {} 
// Make sure we set the data so it isn't changed later 
jQuery.data( elem, key, data ); 
} else { 
data = undefined; 
} 
} 
return
 data; 
}

以上就是总结jQuery中$.data()用法注意事项的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的总结jQuery中$.data()用法注意事项全部内容，希望文章能够帮你解决总结jQuery中$.data()用法注意事项所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端