前段时间同事在群里对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. 针对如下示便： 复制代码 代码如下: <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> $("div").data("role") === "page"; $("div").data("lastValue") === 43; $("div").data("hidden") === true; $("div").data("options").name === "John"; 即当使用.data()获取值时，jQuery会首先尝试将获取的字符串值转化成JS类型，包括布尔值，null，数字，对象，数组： 若值是”true|false”，则返回相应的布尔值； 若值是”null”，则返回null； 若值是纯数字构成的字符串（+data + ”” === data），则返回相应的数字（+data）； 若值是由(?:{[sS]*}|[[sS]*])$，比如”{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 = /(?:{[sS]*}|[[sS]*])$/,*/ 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 formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

query formValidator插件非常好用，但是有一个严重的Bug，在使用ajax验证的时候，如果输入框的内容已经存在，把鼠标放到输入框，不做任何修改再离开，则会提示错误， 这是这个插件犯的一个很愚蠢的错误 复制代码 代>>>详细阅读

本文标题：jQuery $.data()方法使用注意细节

地址：http://www.17bianji.com/kaifa2/JS/22643.html

 1/2    1