TA貢獻(xiàn)1895條經(jīng)驗 獲得超3個贊
如果要將數(shù)據(jù)從服務(wù)器傳遞到DOM元素，則應(yīng)在元素上設(shè)置數(shù)據(jù)：
<a id="foo" data-foo="bar" href="#">foo!</a>
然后可以使用.data()jQuery 訪問數(shù)據(jù)：
console.log( $('#foo').data('foo') );//outputs "bar"但是，當(dāng)您使用數(shù)據(jù)在jQuery中的DOM節(jié)點上存儲數(shù)據(jù)時，變量存儲在節(jié)點對象上。這是為了容納復(fù)雜的對象和引用，因為將數(shù)據(jù)存儲在節(jié)點元素上作為屬性只能容納字符串值。
從上面繼續(xù)我的例子：
$('#foo').data('foo', 'baz');console.log( $('#foo').attr('data-foo') );//outputs "bar" as the attribute was never
changedconsole.log( $('#foo').data('foo') );//outputs "baz" as the value has been updated on the object此外，數(shù)據(jù)屬性的命名約定有一點隱藏的“陷阱”：
HTML：
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS：
console.log( $('#bar').data('fooBarBaz') );//outputs "fizz-buzz" as hyphens are automatically camelCase'd帶連字符的鍵仍然有效：
HTML：
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS：
console.log( $('#bar').data('foo-bar-baz') );//still outputs "fizz-buzz"但是返回的對象.data()不會設(shè)置帶連字符的鍵：
$('#bar').data().fooBarBaz; //works$('#bar').data()['fooBarBaz']; //works$('#bar').data()['foo-bar-baz']; //does not work出于這個原因，我建議在javascript中避免使用帶連字符的鍵。
對于HTML，請繼續(xù)使用帶連字符的表單。HTML屬性應(yīng)該得到ASCII-小寫自動，所以<div data-foobar></div>，<DIV DATA-FOOBAR></DIV>和<dIv DaTa-FoObAr></DiV>被認(rèn)為被視為是相同的，但最好的相容性下殼體形式應(yīng)是優(yōu)選的。
.data()如果值與識別的模式匹配，則該方法還將執(zhí)行一些基本的自動轉(zhuǎn)換：
HTML：
<a id="foo"
href="#"
data-str="bar"
data-bool="true"
data-num="15"
data-json='{"fizz":["buzz"]}'>foo!</a>JS：
$('#foo').data('str'); //`"bar"`$('#foo').data('bool'); //`true`$('#foo').data('num'); //`15`$('#foo').data('json'); //`{fizz:['buzz']}`這種自動轉(zhuǎn)換功能非常便于實例化小部件和插件：
$('.widget').each(function () {
$(this).widget($(this).data());
//-or-
$(this).widget($(this).data('widget'));});如果您絕對必須將原始值作為字符串，那么您將需要使用.attr()：
HTML：
<a id="foo" href="#" data-color="ABC123"></a><a id="bar" href="#" data-color="654321"></a>
JS：
$('#foo').data('color').length; //6$('#bar').data('color').length; //undefined, length isn't a property of numbers$('#foo').
attr('data-color').length; //6$('#bar').attr('data-color').length; //6這是一個人為的例子。為了存儲顏色值，我曾經(jīng)使用數(shù)字十六進制表示法（即0xABC123），但值得注意的是，在1.7.2之前的jQuery版本中，十六進制被錯誤地解析，并且不再被解析為NumberjQuery 1.8 rc 1。
jQuery 1.8 rc 1改變了自動轉(zhuǎn)換的行為。之前，任何有效表示的格式都Number將被轉(zhuǎn)換為Number?，F(xiàn)在，只有數(shù)字值表示保持不變時才會自動轉(zhuǎn)換。用一個例子可以很好地說明這一點。
HTML：
<a id="foo" href="#" data-int="1000" data-decimal="1000.00" data-scientific="1e3" data-hex="0x03e8">foo!</a>
JS：
// pre 1.8 post 1.8$('#foo').data('int');
// 1000 1000$('#foo').data('decimal');
// 1000 "1000.00"$('#foo').data('scientific');
// 1000 "1e3"$('#foo').data('hex');
// 1000 "0x03e8"如果您計劃使用替代數(shù)字語法來訪問數(shù)值，請確保將值轉(zhuǎn)換為Number第一個值，例如使用一元運算+符。
JS（續(xù)）：
+$('#foo').data('hex'); // 1000
TA貢獻(xiàn)1804條經(jīng)驗 獲得超8個贊
您可以使用data-*屬性嵌入自定義數(shù)據(jù)。這些data-*屬性使我們能夠在所有HTML元素上嵌入自定義數(shù)據(jù)屬性。
jQuery .data()方法允許您以一種安全的方式從循環(huán)引用中獲取/設(shè)置任何類型的數(shù)據(jù)到DOM元素，從而避免內(nèi)存泄漏。
jQuery .attr()方法僅為匹配集中的第一個元素獲取/設(shè)置屬性值。
例：
<span id="test" title="foo" data-kind="primary">foo</span>$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");舉報