jQuery $.data()方法使用注意細(xì)節(jié)
更新時(shí)間：2012年12月31日 11:47:33 投稿：whsnow
前段時(shí)間同事在群里對(duì)jQuery里的.data()方法接下來(lái)介紹jQuery $.data()方法使用注意細(xì)節(jié),需要了解的朋友可以參考下
前段時(shí)間同事在群里對(duì)jQuery里的.data()
XXX(NNNNNNN) 15:11:34
<a id="a" data-xxx="00123" />
alert($('#a').data('xxx'));//123
data方法不靠譜
XXX(NNNNNNN) 15:13:17
老老實(shí)實(shí)用attr('data-xxx')吧細(xì)研究了下jQuery文檔對(duì).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.
針對(duì)如下示便：
復(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()獲取值時(shí)，jQuery會(huì)首先嘗試將獲取的字符串值轉(zhuǎn)化成JS類(lèi)型，包括布爾值，null，數(shù)字，對(duì)象，數(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)然文檔里也特意說(shuō)明了——如果就是想獲取字符串值而不想獲得自動(dòng)轉(zhuǎn)換的值，可以使用.attr(“data-”+key)來(lái)獲取相應(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類(lèi)型，包括布爾值，null，數(shù)字，對(duì)象，數(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;
}
相關(guān)文章
JavaScript中toLocaleString()和toString()的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript中toLocaleString()和toString()的區(qū)別,結(jié)合實(shí)例形式對(duì)比分析了toLocaleString()和toString()針對(duì)字符串、數(shù)組與日期操作過(guò)程中的區(qū)別與使用技巧,需要的朋友可以參考下2018-08-08
詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)綁定，關(guān)于JavaScript中為元素綁定的事件失效的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JS數(shù)據(jù)結(jié)構(gòu)與算法中的隊(duì)列結(jié)構(gòu)詳解
隊(duì)列指的是一種受限的線性表，先進(jìn)先出，今天通過(guò)本文帶領(lǐng)大家認(rèn)識(shí)隊(duì)列及隊(duì)列的應(yīng)用，對(duì)JS數(shù)據(jù)結(jié)構(gòu)與算法-隊(duì)列結(jié)構(gòu)相關(guān)知識(shí)感興趣的朋友一起看看吧2022-11-11
JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
js設(shè)置cookie有很多種方法，包括JS設(shè)置cookie、讀取cookie，工作中常會(huì)用到！下面是詳細(xì)代碼，感興趣的小伙伴們可以參考一下2016-02-02
非常不錯(cuò)的可以生產(chǎn)標(biāo)簽的小東西2008-04-04
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
這篇文章主要介紹了JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JavaScript多級(jí)判定代碼優(yōu)化，JavaScript用二元運(yùn)算符和if拆分優(yōu)化多級(jí)判定結(jié)構(gòu),?用JavaScript邏輯運(yùn)算符替換if-else結(jié)構(gòu)判定2023-02-02
javascript導(dǎo)出csv文件（excel）的方法示例
這篇文章主要給大家介紹了關(guān)于javascript導(dǎo)出csv文件（excel）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08