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()或其他任何地方访问
  • 在检查时不公开可见
  • 可以是对象