jQuery数据与Attr？

jQuery数据与Attr？

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

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

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

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

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

从上面继续我的示例：

$('#foo').data('foo', 'baz');console.log( $('#foo').attr('data-foo') );//outputs "bar" as the attribute was never changedconsole.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版本中无法正确解析十六进制，并且Number从jQuery 1.8 rc 1起不再将其解析为a 。

jQuery 1.8 rc 1更改了自动广播的行为。之前，任何有效表示a的格式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