jQuery数据与Attr?
使用之间$.data
和$.attr
使用时的用法有什么区别data-someAttribute
?
我的理解是$.data
存储在jQuery的内部$.cache
,而不是DOM。因此,如果要$.cache
用于数据存储,则应使用$.data
。如果要添加HTML5数据属性,则应使用$.attr("data-attribute", "myCoolValue")
。
回答:
如果要将数据从服务器传递到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 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-小写自动,所以<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
以上是 jQuery数据与Attr? 的全部内容, 来源链接: utcz.com/qa/421310.html