jQuery Data vs Attr？

如果要将数据从服务器传递到 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

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

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

console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

带连字符的密钥仍可正常工作：

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

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（） 方法还将执行一些基本的自动转换，如果值与识别的模式匹配：

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

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

$('#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 更改了自动投射的行为。以前，任何作为 的有效表示形式的格式都将强制转换为 。现在，只有当数字值的表示形式保持不变时，才会自动转换数值。这最好用一个例子来说明。NumberNumber

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

                              // 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

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

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

$.fn.data 将信息存储在一个晦涩难懂的地方。它位于一个封闭的局部变量中，该变量称为局部定义的函数 Data 的实例。不能直接从 jQuery 外部访问此变量。data_user

带有 attr（） 的数据集

• 可从以下位置访问$(element).attr('data-name')
• 可从 访问，element.getAttribute('data-name')
• 如果值的形式也是可从 和 访问的data-name$(element).data(name)element.dataset['name']element.dataset.name
• 检查时在元件上可见
• 不能是对象

包含 .data（） 的数据集

• 只能从以下位置访问.data(name)
• 无法从其他任何地方访问.attr()
• 检查时在元件上不公开可见
• 可以是对象