$。Data和$。当使用data-someAttribute?
我的理解是$。数据存储在jQuery的$。缓存,而不是DOM。因此,如果我想使用$。缓存数据存储,我应该使用$.data。如果我想添加HTML5数据属性,我应该使用$。attr(“数据属性”、“myCoolValue”)。
$。Data和$。当使用data-someAttribute?
我的理解是$。数据存储在jQuery的$。缓存,而不是DOM。因此,如果我想使用$。缓存数据存储,我应该使用$.data。如果我想添加HTML5数据属性,我应该使用$。attr(“数据属性”、“myCoolValue”)。
当前回答
如果你将数据从服务器传递给DOM元素,你应该在元素上设置数据:
<a id="foo" data-foo="bar" href="#">foo!</a>
然后可以在jQuery中使用.data()访问数据:
console.log( $('#foo').data('foo') );
//outputs "bar"
但是,当您使用数据在jQuery的DOM节点上存储数据时,变量存储在节点对象上。这是为了适应复杂的对象和引用,因为将数据存储在节点元素上的属性只会容纳字符串值。
继续上面的例子:
$('#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属性应该自动得到ascii小写形式,因此<div data-foobar></div>, <div data-foobar></div>,和<div data-foobar></div>应该被视为相同,但为了最好的兼容性,小写形式应该是首选的。
如果值与识别的模式匹配,.data()方法也会执行一些基本的自动强制转换:
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']}`
这种自动强制转换功能对于实例化小部件和插件非常方便:
$('.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
这是一个虚构的例子。对于存储颜色值,我曾经使用数字十六进制符号(即0xABC123),但值得注意的是,十六进制在1.7.2之前的jQuery版本中被错误地解析,并且从jQuery 1.8 rc 1开始不再被解析为数字。
jQuery 1.8 rc 1改变了自动转换的行为。在此之前,任何数字的有效表示形式都将转换为数字。现在,数值型值只有在表示保持不变时才会自动强制转换。用一个例子最好地说明了这一点。
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"
如果计划使用替代数字语法访问数值,请确保先将值转换为数字,例如使用一元+运算符。
JS (cont):
+$('#foo').data('hex'); // 1000
其他回答
如果你将数据从服务器传递给DOM元素,你应该在元素上设置数据:
<a id="foo" data-foo="bar" href="#">foo!</a>
然后可以在jQuery中使用.data()访问数据:
console.log( $('#foo').data('foo') );
//outputs "bar"
但是,当您使用数据在jQuery的DOM节点上存储数据时,变量存储在节点对象上。这是为了适应复杂的对象和引用,因为将数据存储在节点元素上的属性只会容纳字符串值。
继续上面的例子:
$('#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属性应该自动得到ascii小写形式,因此<div data-foobar></div>, <div data-foobar></div>,和<div data-foobar></div>应该被视为相同,但为了最好的兼容性,小写形式应该是首选的。
如果值与识别的模式匹配,.data()方法也会执行一些基本的自动强制转换:
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']}`
这种自动强制转换功能对于实例化小部件和插件非常方便:
$('.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
这是一个虚构的例子。对于存储颜色值,我曾经使用数字十六进制符号(即0xABC123),但值得注意的是,十六进制在1.7.2之前的jQuery版本中被错误地解析,并且从jQuery 1.8 rc 1开始不再被解析为数字。
jQuery 1.8 rc 1改变了自动转换的行为。在此之前,任何数字的有效表示形式都将转换为数字。现在,数值型值只有在表示保持不变时才会自动强制转换。用一个例子最好地说明了这一点。
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"
如果计划使用替代数字语法访问数值,请确保先将值转换为数字,例如使用一元+运算符。
JS (cont):
+$('#foo').data('hex'); // 1000
两者之间的主要区别是存储在哪里以及如何访问它。
.fn美元。attr将信息直接存储在元素的属性中,这些属性在检查时是公开可见的,也可以从元素的本地API中获得。
.fn美元。数据将信息存储在一个非常隐蔽的地方。它位于一个名为data_user的封闭局部变量中,该变量是一个局部定义函数Data的实例。这个变量不能从jQuery外部直接访问。
带有attr()的数据集
从$(element).attr('data-name')访问 从element.getAttribute('data-name') 如果值是data-name的形式,也可以从$(element).data(name)和element. data . name访问。Dataset ['name']和element.dataset.name 在检查时在元件上可见 不能是对象
使用.data()的数据集
只能从.data(name)访问 不能从.attr()或其他任何地方访问 在检查时元素上不公开可见 可以是对象
您可以使用data-*属性来嵌入自定义数据。data-*属性使我们能够在所有HTML元素中嵌入自定义数据属性。
jQuery .data()方法允许您以一种安全的方式获取/设置DOM元素的任何类型的数据,从而避免循环引用,从而避免内存泄漏。
jQuery .attr()方法只获取/设置匹配集中的第一个元素的属性值。
例子:
<span id="test" title="foo" data-kind="primary">foo</span>
$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");