jQuery Data vs Attr?

jQuery Data vs Attr?

本文关键字：Attr vs Data jQuery      更新时间：2023-09-26

使用data-someAttribute时，$.data和$.attr之间的用法有什么区别？

我的理解是$.data存储在jQuery的$.cache中，而不是DOM中。因此，如果我想使用$.cache进行数据存储，我应该使用$.data。如果我想添加HTML5数据属性，我应该使用$.attr("data-attribute", "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 开始不再解析为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

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

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

$.fn.data将信息存储在一个可笑的模糊位置。它位于一个名为 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()或其他任何地方访问
  • 检查时在元件上不公开可见
  • 可以是对象

您可以使用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");
相关文章：