快捷導(dǎo)航

jQuery $.data()方法使用注意細(xì)節(jié)

更新時間：2012年12月31日 11:47:33 投稿：whsnow

前段時間同事在群里對jQuery里的.data()方法接下來介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下

前段時間同事在群里對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')吧細(xì)研究了下jQuery文檔對.data()方法的描述：

復(fù)制代碼代碼如下:

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.

針對如下示便：

復(fù)制代碼代碼如下:

<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";

即當(dāng)使用.data()獲取值時，jQuery會首先嘗試將獲取的字符串值轉(zhuǎn)化成JS類型，包括布爾值，null，數(shù)字，對象，數(shù)組：
若值是”true|false”，則返回相應(yīng)的布爾值；
若值是”null”，則返回null；
若值是純數(shù)字構(gòu)成的字符串（+data + ”” === data），則返回相應(yīng)的數(shù)字（+data）；
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$，比如”{key:value}“或[1,2,3]，則嘗試使用jQuery.parseJSON解析之；
否則返回字符串值
當(dāng)然文檔里也特意說明了——如果就是想獲取字符串值而不想獲得自動轉(zhuǎn)換的值，可以使用.attr(“data-”+key)來獲取相應(yīng)的值：

復(fù)制代碼代碼如下:

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

如下為jQuery源碼

復(fù)制代碼代碼如下:

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)方法嘗試將獲取的值轉(zhuǎn)化成JS類型，包括布爾值，null，數(shù)字，對象，數(shù)組*/
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;
}