Javascript jQuery数据与Attr？

使用

数据someAttribute

时，

$.data

和

$.attr

在用法上有什么区别

---

我的理解是，

$数据

存储在jQuery的

$缓存

中，而不是DOM中。因此，如果我想使用

$.cache

进行数据存储，我应该使用

$.data

。如果我想添加HTML5数据属性，我应该使用

$.attr（“数据属性”，“MyColValue”）

如果要从服务器向DOM元素传递数据，则应该在元素上设置数据：

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

但是，当您使用data在jQuery中的DOM节点上存储数据时，变量存储在node对象上。这是为了适应复杂的对象和引用，因为将数据作为属性存储在节点元素上只会适应字符串值

继续我上面的例子： 此外，数据属性的命名约定有一点隐藏的“gotcha”：

HTML: 连字符键仍然有效：

HTML: 但是，

.data（）

返回的对象将不会设置连字符键：

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

出于这个原因，我建议避免使用javascript中的连字符键

对于HTML，请继续使用连字符形式，因此，

、

和

应被视为相同，但为了获得最佳兼容性，应首选小写形式

如果值与识别的模式匹配，该方法还将执行一些基本的自动转换：

HTML: 这种自动转换功能对于实例化小部件和插件非常方便：

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

如果必须将原始值作为字符串，则需要使用：

HTML: 这是一个人为的例子。对于存储颜色值，我曾经使用数字十六进制表示法（即0xABC123），但值得注意的是，从jQuery 1.8 rc 1开始，它不再被解析为

数字

jQuery 1.8 rc 1更改了自动强制转换的行为。以前，任何有效表示
数字的格式都将转换为
数字
。现在，只有当数值的表示形式保持不变时，数值才会自动转换。这最好用一个例子来说明

HTML:
如果计划使用可选的数字语法来访问数值，请确保首先将值转换为
数字
，例如使用一元
+
运算符

JS（续）：
两者之间的主要区别在于存储位置和访问方式

将元素上的信息直接存储在属性中，这些属性在检查时是公共可见的，也可以从元素的本机API获得

将信息存储在一个地方。它位于名为
data\u user
的封闭局部变量中，该变量是局部定义函数数据的实例。无法从jQuery外部直接访问此变量

带有
attr（）的数据集


可从
$（element.attr（'data-name'）访问

可从
element.getAttribute（'data-name'）访问

如果值的形式为
数据名称
，也可以从
$（元素）.data（名称）
和
元素.dataset['name']
和
元素.dataset.name
检查时在元件上可见
不能是对象

使用
.Data（）


只能从
访问。数据（名称）
无法从
.attr（）
或其他任何地方访问
检查时在元件上不可见
可以是对象
您可以使用
数据-*
属性嵌入自定义数据。
data-*
属性使我们能够在所有HTML元素上嵌入自定义数据属性

jQuery
.data（）
方法允许您以一种安全的方式获取/设置DOM元素的任何类型的数据，避免循环引用，从而避免内存泄漏

jQuery
.attr（）
方法仅获取/设置匹配集中第一个元素的属性值

示例：

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");

foo
$（“#测试”）.attr（“标题”）；
$（“#测试”）.attr（“数据类型”）；
$（“测试”）。数据（“种类”）；
$（“#测试”）。数据（“值”、“条”）；
请阅读以下内容：@zzz，但它似乎并没有真正回答这个问题…？事实上，它是间接回答的。通过
attr（）
附加对象可能导致内存泄漏（至少在IE中），而使用
data（）
是安全的。他在回答中暗示了这一点，尽管他没有明确地站出来说出来。关于jQuery文档的更多信息（请参阅“附加说明”）：@John B，仅供参考（即使这是旧的），data someAttribute的data属性无效；根据规范，只允许使用小写字母。通过使用大写字符，您将遇到无数奇怪的问题。@AdrienBe通过搜索很容易找到许多引用，但由于我很无聊，您可以这样做：@vitorbal，虽然这是真的，但是
.data（）
返回的对象将不具有连字符的表单集，因此
$（'#bar'）。data（'foo-bar-baz'）
将起作用，但
$（'#bar'））.data（）['foo-bar-baz']
将不会。正是出于这个原因，我建议人们避免使用连字符形式。好的，现在我明白你的意思了。不知道那个小细节，谢谢更新：）@SableFoste，哪个链接？是该方法的正确链接，据我所知没有更改。我喜欢，foo，bar，baz，fizz，buzz more:DLove每一行。是的，我的主要问题是这些数据存储在哪里，所以感谢您提供的信息！另外，如果以后要将数据用作选择器，则可以使用
.attr（）
（
.data（）
将找不到；请参阅）
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd

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

console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

<a id="foo"
    href="#"
    data-str="bar"
    data-bool="true"
    data-num="15"
    data-json='{"fizz":["buzz"]}'>foo!</a>

$('#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'));
});

<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>

$('#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

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x03e8">foo!</a>

                              // 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"

+$('#foo').data('hex'); // 1000

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");