jQuery的.data()方法在按钮上无法生效？为何.prop()也无效仅.attr()可用

嘿，这个问题其实不是按钮的特殊情况，核心是jQuery这几个方法的工作机制和你预期的不一样，我给你拆解下：

• .data()方法的本质是操作缓存，而非DOM属性
  当你调用$("button").data("test", "tested")时，jQuery并没有修改DOM元素上的data-test属性，而是把这个值存在了它自己维护的内部缓存对象里。你可以通过$("button").data("test")获取到这个值，但在浏览器的DOM检查器里是看不到data-test属性变化的。这个方法的设计初衷是用来在元素上存储数据，避免直接操作DOM带来的性能开销。

• .prop()不适合处理自定义data-*属性
  首先你这里还打错了一个拼写（是data-test不是date-test😉），不过就算拼写正确，.prop()主要是用来操作DOM元素的原生属性（比如disabled、checked、value这些浏览器内置的属性），对于自定义的data-*这类HTML属性，.prop()并不适用，它没法直接修改这些属性。

• .attr()才是直接操作HTML属性的方法
  $("button").attr("data-test", "tested")会直接修改DOM元素上的data-test属性，所以你能在DOM检查器里看到这个属性被更新，同时如果之后调用.data("test")，jQuery也会先从DOM属性里读取值并同步到缓存中。

举个简单的代码示例帮你理解：

// 用.attr()设置，DOM属性会更新
$("button").attr("data-test", "tested");
console.log($("button").attr("data-test")); // 输出"tested"
console.log($("button").data("test")); // 也输出"tested"

// 用.data()设置，DOM属性不变，只有缓存更新
$("button").data("test", "cached-value");
console.log($("button").data("test")); // 输出"cached-value"
console.log($("button").attr("data-test")); // 还是输出"tested"

总结一下：

• 如果需要在DOM上可见地修改data-*属性，用.attr()；
• 如果只是需要在jQuery内部存储/读取数据，不需要修改DOM，用.data()；
• .prop()就别用来处理自定义data-*属性啦，它有自己的适用场景。

内容的提问来源于stack exchange，提问作者7 Reeds