jQuery数据与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节点上时，variables将存储在节点对象中 。 这是为了容纳复杂的对象和引用，将数据存储在节点元素上，因为属性只能容纳string值。
从上面继续我的例子：
$('#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
此外，数据属性的命名约定有一点隐藏的“gotcha”：
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
正因为如此，我build议避免在JavaScript中使用连字符。
对于HTML，请继续使用连字forms。 HTML属性应该自动获得ASCII-lowercased ，所以应该处理<div data-foobar></div> ， <DIV DATA-FOOBAR></DIV>和<dIv DaTa-FoObAr></DiV>作为相同的，但为了最好的兼容性，小写forms应该是优选的。
.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']}`
这种自动转换function非常方便实例化小部件和插件：
$('.widget').each(function () { $(this).widget($(this).data()); //-or- $(this).widget($(this).data('widget')); });
如果你绝对必须有一个string的原始值，那么你需要使用.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
这是一个人为的例子。 对于存储颜色值，我曾经使用数字hex表示法（即0xABC123），但值得注意的是， 在1.7.2之前的jQuery版本中 ， hex被错误地parsing ，并且不再被parsing为一个Number如jQuery 1.8 rc 1。
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本地variables上，该variables是本地定义的函数Data的一个实例。 这个variables不能直接从jQuery外部访问。
用attr()设置数据
- 可从
$(element).attr('data-name') - 可以从
element.getAttribute('data-name')， - 如果值的forms也可以从
$(element).data(name)和element.dataset['name']和element.dataset.name - 在检查时可见的元素
- 不能成为对象
使用.data()设置数据
- 只能从
.data(name) - 不能从
.attr()或其他任何地方访问 - 在检查时不公开可见
- 可以是对象
