jQuery数据(.)不是储存在DOM里吗？

Question

如果data-x在DOM中是这样的：

<div id="blah" data-x="143">Hello</div>

我用

$('#blah').data('x', 13687)

然后，在DOM中似乎没有修改data-x (使用浏览器对下面代码片段的检查功能)：

​

​

这是正常行为吗？

示例：

​

console.log($('#blah').data('x'));
$('#blah').data('x', 13687)
console.log($('#blah').data('x'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="blah" data-x="143">Hello</div>

​

Answer 1

jQuery的data()方法不设置数据属性，而是将数据存储在内部对象中。

HTML5数据属性将自动进入jQuery的数据对象，这意味着数据对象的初始值反映了属性中给定的任何内容，但是用data() 更改值不会更新属性，只会更新jQuery使用的内部数据对象。

所以是的，属性不变是正常的，应该是这样的。

如果由于某些原因必须更改实际属性，则可以使用attr()

$('#blah').attr('data-x', 13687)

请注意，如果您在代码中始终使用data()，并且不使用依赖于数据属性的其他脚本，则通常不需要这样做。

您将在jQuery中找到更多关于如何处理属性和如何存储数据的信息。

Answer 2

您应该使用$('#blah').attr('data-x', 13687)而不是$('#blah').data('x', 13687)，因为data()不是获取属性数据的方法-x来设置您必须使用attr()来设置值。

Answer 3

console.log($('#blah').attr('data-x'));
$('#blah').attr('data-x', 13687);
console.log($('#blah').attr('data-x'));

使用attr()函数处理属性及其数据。

更新：，我为你写了一个小插件！

$.fn.dataRead=function(a,b){
    this.attr("data-"+a,b);
};

现在按照您的需要工作:示例：

console.log($('#blah').dataRead('x'));
    $('#blah').dataRead('x', 13687);
    console.log($('#blah').dataRead('x'));