jQuery数据vs Attr？

使用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-lowercased，所以应该处理<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版本中，hex被错误地解析，并且不再像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()或其他任何地方访问

在检查时不会公开可见

可以是对象

链接地址: http://www.djcxy.com/p/4731.html

上一篇: jQuery Data vs Attr?

下一篇: jQuery checkbox .prop() problem