为什么不更改jQuery $ .fn.data()更新相应的html 5 data-*属性？

Question

这是一个简单的例子来说明行为:

给出这个html标记:

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

和这个jQuery代码(使用jQuery 1.5.1):

// read the data
alert($("div").data("company"));
// returns Microsoft <<< OK!

// set the data
$("div").data("company","Apple");
alert($("div").data("company"));
// returns Apple <<< OK!

// attribute selector
alert($("div[data-company='Apple']").length);
// returns 0  <<< WHY???

// attribute selector again
alert($("div[data-company='Microsoft']").length);
// returns 1  <<< WHY???

// set the attribute directly
$("div").attr("data-company","Apple");
alert($("div[data-company='Apple']").length);
// now returns 1 <<< OK!

由于jQuery自动将HTML5 data-*导入jQuery的数据对象,因此在数据更改时不应更新属性吗？

Answer 1

通常,.data()如果您使用.data()来访问/设置/修改DOM元素上的数据,则不需要进行往返.因此,为每个.data()设置/修改操作(.data()在jQuery.cache内部存储其值)避免访问DOM的性能开销是有意义的.

如果您想自己强制执行往返行为,可以订阅"setData"或"changeData"事件,然后将.data()这些事件中的更新推送到相应的DOM元素.attr().

Answer 2

根据文档,这是正确的行为:

数据属性在第一次访问数据属性时被拉出,然后不再被访问或变异(然后所有数据值都在内部存储在jQuery中).

(来自:http://api.jquery.com/data)