jQuery Data vs Attr？

Question

使用$.data时，$.attr与data-someAttribute之间的使用有何不同？

我的理解是$.data存储在jQuery的$.cache中，而不是DOM中。因此，如果我想使用$.cache进行数据存储，我应该使用$.data。如果我想添加HTML5数据属性，我应该使用$.attr("data-attribute", "myCoolValue")。

Answer 1

如果要从服务器向DOM元素传递数据，则应在元素上设置数据：

<a id="foo" data-foo="bar" href="#">foo!</a>

然后可以使用jQuery中的.data()访问数据：

console.log( $('#foo').data('foo') );
//outputs "bar"

但是，当您使用数据在jQuery 中的DOM节点上存储数据时，变量将存储在节点 object 上。这是为了容纳复杂的对象和引用，因为在节点元素上存储数据，因为属性只能容纳字符串值。

_{继续我上面的例子：}

$('#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

此外，数据属性的命名约定有一点隐藏的“gotcha”：

<子> 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()方法也会执行一些基本的自动转换：

<子> 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），但值得注意的是hex was parsed incorrectly in jQuery versions before 1.7.2，并且从jQuery 1.8 rc 1开始不再被解析为Number。}

jQuery 1.8 rc 1改变了自动投射的行为。之前，任何有效代表Number的格式都将转换为Number。现在，只有数字值表示保持不变时才会自动转换。用一个例子可以很好地说明这一点。

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

如果您打算使用其他数字语法来访问数值，请务必先将值转换为Number，例如使用一元+运算符。

_{JS（续）：}

+$('#foo').data('hex'); // 1000

Answer 2

两者之间的主要区别在于它的存储位置以及访问方式。

$.fn.attr将信息直接存储在元素中，这些属性在检查时是公开可见的，也可以从元素的本机API中获得。

$.fn.data将信息存储在ridiculously obscure位置。它位于一个名为data_user的封闭式局部变量中，该变量是本地定义的函数Data的一个实例。无法直接从jQuery外部访问此变量。

使用attr()

设置的数据

• 可从$(element).attr('data-name')
访问
• 可从element.getAttribute('data-name')，
访问
• 如果该值的格式为data-name，也可以从$(element).data(name)和element.dataset['name']以及element.dataset.name
访问
• 在检查时可见元素
• 不能是对象

使用.data()

设置的数据

来自.data(name) 的
• 仅可访问
• 无法从.attr()或其他任何地方访问
• 检查时元素上未公开显示
• 可以是对象

Answer 3

您可以使用Service#stopSelf()属性来嵌入自定义数据。 data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性。

jQuery data-*方法允许您以一种安全的方式将DOM类型的任何类型的数据获取/设置为DOM元素，从而避免循环引用，从而避免内存泄漏。

jQuery .data()方法仅获取/设置匹配集中第一个元素的属性值。

示例：

.attr()