jQuery Data vs Attr？

Question

jQuery Data vs Attr？

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

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

Answer 1

如果要将数据从服务器传递到DOM元素，则应在元素上设置数据：<a&nbsp;id="foo"&nbsp;data-foo="bar"&nbsp;href="#">foo!</a>然后可以使用.data()jQuery&nbsp;访问数据：console.log(&nbsp;$('#foo').data('foo')&nbsp;);//outputs&nbsp;"bar"但是，当您使用数据在jQuery中的DOM节点上存储数据时，变量存储在节点对象上。这是为了容纳复杂的对象和引用，因为将数据存储在节点元素上作为属性只能容纳字符串值。从上面继续我的例子：$('#foo').data('foo',&nbsp;'baz');console.log(&nbsp;$('#foo').attr('data-foo')&nbsp;);//outputs&nbsp;"bar"&nbsp;as&nbsp;the&nbsp;attribute&nbsp;was&nbsp;never &nbsp;changedconsole.log(&nbsp;$('#foo').data('foo')&nbsp;);//outputs&nbsp;"baz"&nbsp;as&nbsp;the&nbsp;value&nbsp;has&nbsp;been&nbsp;updated&nbsp;on&nbsp;the&nbsp;object此外，数据属性的命名约定有一点隐藏的“陷阱”：HTML：<a&nbsp;id="bar"&nbsp;data-foo-bar-baz="fizz-buzz"&nbsp;href="#">fizz&nbsp;buzz!</a>JS：console.log(&nbsp;$('#bar').data('fooBarBaz')&nbsp;);//outputs&nbsp;"fizz-buzz"&nbsp;as&nbsp;hyphens&nbsp;are&nbsp;automatically&nbsp;camelCase'd带连字符的键仍然有效：HTML：<a&nbsp;id="bar"&nbsp;data-foo-bar-baz="fizz-buzz"&nbsp;href="#">fizz&nbsp;buzz!</a>JS：console.log(&nbsp;$('#bar').data('foo-bar-baz')&nbsp;);//still&nbsp;outputs&nbsp;"fizz-buzz"但是返回的对象.data()不会设置带连字符的键：$('#bar').data().fooBarBaz;&nbsp;//works$('#bar').data()['fooBarBaz'];&nbsp;//works$('#bar').data()['foo-bar-baz'];&nbsp;//does&nbsp;not&nbsp;work出于这个原因，我建议在javascript中避免使用带连字符的键。对于HTML，请继续使用带连字符的表单。HTML属性应该得到ASCII-小写自动，所以<div data-foobar></div>，<DIV DATA-FOOBAR></DIV>和<dIv DaTa-FoObAr></DiV>被认为被视为是相同的，但最好的相容性下壳体形式应是优选的。.data()如果值与识别的模式匹配，则该方法还将执行一些基本的自动转换：HTML：<a&nbsp;id="foo" &nbsp;&nbsp;&nbsp;&nbsp;href="#" &nbsp;&nbsp;&nbsp;&nbsp;data-str="bar" &nbsp;&nbsp;&nbsp;&nbsp;data-bool="true" &nbsp;&nbsp;&nbsp;&nbsp;data-num="15" &nbsp;&nbsp;&nbsp;&nbsp;data-json='{"fizz":["buzz"]}'>foo!</a>JS：$('#foo').data('str');&nbsp;&nbsp;//`"bar"`$('#foo').data('bool');&nbsp;//`true`$('#foo').data('num');&nbsp;&nbsp;//`15`$('#foo').data('json');&nbsp;//`{fizz:['buzz']}`这种自动转换功能非常便于实例化小部件和插件：$('.widget').each(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(this).widget($(this).data()); &nbsp;&nbsp;&nbsp;&nbsp;//-or- &nbsp;&nbsp;&nbsp;&nbsp;$(this).widget($(this).data('widget'));});如果您绝对必须将原始值作为字符串，那么您将需要使用.attr()：HTML：<a&nbsp;id="foo"&nbsp;href="#"&nbsp;data-color="ABC123"></a><a&nbsp;id="bar"&nbsp;href="#"&nbsp;data-color="654321"></a>JS：$('#foo').data('color').length;&nbsp;//6$('#bar').data('color').length;&nbsp;//undefined,&nbsp;length&nbsp;isn't&nbsp;a&nbsp;property&nbsp;of&nbsp;numbers$('#foo'). attr('data-color').length;&nbsp;//6$('#bar').attr('data-color').length;&nbsp;//6这是一个人为的例子。为了存储颜色值，我曾经使用数字十六进制表示法（即0xABC123），但值得注意的是，在1.7.2之前的jQuery版本中，十六进制被错误地解析，并且不再被解析为NumberjQuery 1.8 rc 1。jQuery 1.8 rc 1改变了自动转换的行为。之前，任何有效表示的格式都Number将被转换为Number。现在，只有数字值表示保持不变时才会自动转换。用一个例子可以很好地说明这一点。HTML：<a&nbsp;id="foo" &nbsp;&nbsp;&nbsp;&nbsp;href="#" &nbsp;&nbsp;&nbsp;&nbsp;data-int="1000" &nbsp;&nbsp;&nbsp;&nbsp;data-decimal="1000.00" &nbsp;&nbsp;&nbsp;&nbsp;data-scientific="1e3" &nbsp;&nbsp;&nbsp;&nbsp;data-hex="0x03e8">foo!</a>JS：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;pre&nbsp;1.8&nbsp;&nbsp;&nbsp;&nbsp;post&nbsp;1.8$('#foo').data('int');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1000$('#foo').data('decimal');&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;"1000.00"$('#foo').data('scientific'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"1e3"$('#foo').data('hex');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"0x03e8"如果您计划使用替代数字语法来访问数值，请确保将值转换为Number第一个值，例如使用一元运算+符。JS（续）：+$('#foo').data('hex');&nbsp;//&nbsp;1000

Answer 2

您可以使用data-*属性嵌入自定义数据。这些data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性。jQuery&nbsp;.data()方法允许您以一种安全的方式从循环引用中获取/设置任何类型的数据到DOM元素，从而避免内存泄漏。jQuery&nbsp;.attr()方法仅为匹配集中的第一个元素获取/设置属性值。例：<span&nbsp;id="test"&nbsp;title="foo"&nbsp;data-kind="primary">foo</span>$("#test").attr("title"); $("#test").attr("data-kind"); $("#test").data("kind"); $("#test").data("value",&nbsp;"bar");