为什么不'；t对jQuery$.fn.data（）的更改是否会更新相应的HTML5数据-*属性？

下面是一个简单的示例来说明该行为：

给定此html标记：

<div data-company="Microsoft"></div>

这个jQuery代码（使用jQuery 1.5.1）：

//读取数据
警报（$（“div”）.数据（“公司”）；
//返回Microsoft根据文档，这是正确的行为：

数据属性在第一次访问数据属性时被拉入，然后不再被访问或修改（所有数据值都存储在jQuery内部）

（from:）
通常，如果一致使用.data（）访问/设置/修改DOM元素上的数据，则不需要往返
.data（）
。因此，避免每次
.data（）
设置/修改操作（
.data（）
将其值存储在
jQuery.cache
内部）访问DOM的性能开销是有意义的

如果您想自己强制执行往返行为，可以订阅“setData”或“changeData”事件，然后通过
.attr（）
将这些事件中的
.data（）
更新推送到相应的DOM元素，
[data company]
的查询选择器检查属性，而
.data
不会更新它们

您可以将代码更改为仅使用
.attr（'data-
），完全避免使用
.data

您可以设置自己的函数来更新数据和属性：

// update both data and corresponding attribute 'data-x'
$.fn.attrdata = function (a, b)
{
    if (arguments.length > 1)
        this.attr('data-' + a, b);
    else if (typeof a === 'object')
        this.attr(Object.keys(a).reduce(function (obj, key)
        {
            obj['data-' + key] = a[key];
            return obj;
        }, {}));
    return this.data.apply(this, arguments);
};

这样使用：

$("div").attrdata("company", "Apple");
$("div").attrdata({company: "Apple"}); // also possible
console.log($("div").data("company")); // Apple
console.log($("div").attr("data-company")); // Apple
console.log($("div[data-company='Apple']").length); // 1

$("div").attr("data-company", "Microsoft");
$("div").data("company", "Apple");
console.log($('div:data(company=Apple)').length); // 1
console.log($('div[data-company="Apple"]').length); // 0

如果不使用CSS选择器，可以创建自己的jQuery选择器：

$.expr[':'].data = function(elem, index, match) {
  var split = match[3].split('=');
  return $(elem).data(split[0]) == split[1];
};

这样使用：

$("div").attrdata("company", "Apple");
$("div").attrdata({company: "Apple"}); // also possible
console.log($("div").data("company")); // Apple
console.log($("div").attr("data-company")); // Apple
console.log($("div[data-company='Apple']").length); // 1

$("div").attr("data-company", "Microsoft");
$("div").data("company", "Apple");
console.log($('div:data(company=Apple)').length); // 1
console.log($('div[data-company="Apple"]').length); // 0

@James
“div[data company='Apple'”
-你忘了用
]
关闭，这很有意义-那么在选择器上下文中使用.data（）的首选方法是什么？假设我想访问使用.data（）设置/修改的data company='Microsoft'所在的所有元素？我认为没有一种简单的方法可以查询
.data（）
缓存。如果您想使用这样的选择器，您需要实现我提到的“changeData”事件的往返。然后，您可以使数据属性与
.data（）
更改保持同步（而且你也只能有选择地在你打算稍后查询的元素上这样做。）谢谢你，Dave！顺便说一句，我很喜欢你在tekpub上的系列文章。谢谢，很高兴听到。如果你还没有做到最后，我们将讨论如何处理“changeData”事件，这在这里会很有帮助。jQuery中最大的问题是：使用
.data（）
在新元素上设置数据，然后将其添加到DOM中，然后从DOM中检索，然后发现没有数据。文档没有引起足够的注意，您必须使用.attr（'data-…'））在这种情况下。一直都是这样，还是在其中一个版本中进行了更改？看起来一直都是这样。在首次发布此功能时，上述文档中的引用也出现在1.4.3的发行说明中：