$.data
和$.attr
在使用data-someAttribute
时有什么区别?
我的理解是 $.data
存储在 jQuery 的 $.cache
中,而不是 DOM。因此,如果我想使用$.cache
进行数据存储,我应该使用$.data
。如果我想添加 HTML5 数据属性,我应该使用 $.attr("data-attribute", "myCoolValue")
。
最佳答案
如果您从服务器向 DOM 元素传递数据,您应该在元素上设置数据:
<a id="foo" data-foo="bar" href="#">foo!</a>
然后可以使用 .data()
访问数据在 jQuery 中:
console.log( $('#foo').data('foo') );
//outputs "bar"
但是,当您在 jQuery 中 使用 数据将数据存储在 DOM 节点上时,变量将存储在节点 object 上。这是为了适应复杂的对象和引用,因为将节点 element 上的数据存储为属性只会适应字符串值。
从上面继续我的例子:$('#foo').data('foo', 'baz');
console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed
console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object
此外,数据属性的命名约定有一点隐藏的“陷阱”:
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()
返回的对象不会有连字符键集:
$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work
出于这个原因,我建议避免使用 javascript 中的连字符键。
对于 HTML,请继续使用连字符形式。 HTML attributes are supposed to get ASCII-lowercased automatically , 所以 <div data-foobar></div>
, <DIV DATA-FOOBAR></DIV>
, 和 <dIv DaTa-FoObAr></DiV>
应该被视为相同,但为了获得最佳兼容性,应首选小写形式。
.data()
如果该值与可识别的模式匹配,该方法还将执行一些基本的自动转换:
<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']}`
这种自动转换能力对于实例化小部件和插件非常方便:
$('.widget').each(function () {
$(this).widget($(this).data());
//-or-
$(this).widget($(this).data('widget'));
});
如果您绝对必须将原始值作为字符串,那么您需要使用 .attr()
:
<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
这是一个人为的例子。对于存储颜色值,我曾经使用数字十六进制表示法(即 0xABC123),但值得注意的是 hex was parsed incorrectly in jQuery versions before 1.7.2 , 并且不再解析为 Number
从 jQuery 1.8 rc 1 开始。
jQuery 1.8 rc 1 改变了自动转换的行为。以前,任何可以有效表示 Number
的格式将被转换为 Number
.现在,数字值仅在其表示保持不变时才会自动转换。最好用一个例子来说明这一点。
<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"
如果您打算使用其他数字语法来访问数值,请务必将该值转换为 Number
首先,例如使用一元 +
运算符。
+$('#foo').data('hex'); // 1000
https://stackoverflow.com/questions/7261619/