jQuery Data vs Attr？

Question

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

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

Answer 1

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

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

然后可以使用.data()jQuery 访问数据:

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

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

_{从上面继续我的例子:}

$('#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版本中,十六进制被错误地解析,并且不再被解析为NumberjQuery 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

Answer 2

两者之间的主要区别在于它的存储位置和访问方式.

$.fn.attr 将信息直接存储在元素中,这些属性在检查时是公开可见的,也可以从元素的本机API获得.

$.fn.data将信息存储在一个荒谬的地方.它位于一个封闭的局部变量中,称为data_user本地定义的函数Data的一个实例.无法直接从jQuery外部访问此变量.

数据集 attr()

• 可以从 $(element).attr('data-name')
• 可以从element.getAttribute('data-name'),
• 如果值的形式data-name也可以从$(element).data(name)and element.dataset['name']和element.dataset.name
• 检查时在元件上可见
• 不能是对象

数据集 .data()

• 访问只从.data(name)
• 无法从.attr()其他任何地方访问
• 检查时未在元件上公开显示
• 可以是对象