www.cftea.com

jQuery 的 data() 并不会改变 DOM 值

ITPOW2019/2/3 11:28:01

以上代码先 alert 123,再 alert 456,这都在预料之中。

不过,F12,查看 DOM 结构,并没有任何改变。

原来 data() 是只读 DOM 的,并不会改变 DOM 结构。用 data 赋值,虽然会改变值,但是这个值并不会写回 DOM。

再看继续看引入 attr() 的情况。

以上两段代码,alert 都是 456。

上述第一段代码,第一次 alert undefined,第二次 alert 456。

上述第二段代码,第一次 alert 123,第二次 alert 也是 123。

进一步研究,可以得出结论:

  • 至始至终,data() 都不会改变 DOM,但 DOM 的改变是否影响 data() 要继续看下面两条结论。
  • 如果没有某元素某 data- 使用 data() 方法、或者虽然使用了 data() 方法但没有取到值(data- 属性不存在,导致取得值为 undefined):则通过 attr() 赋值、改变值后,data() 方法获取的是 DOM 最新的。
  • 如果已经某元素某 data- 使用 data() 方法,且取到值了:就相当于与 DOM 断开了,attr() 赋值不会影响 data() 值,data() 赋值也不会影响 DOM 表现。
  • 所以不建议对 DOM 会有变化的 data- 采用 data() 方法取值。
<<返回首页<<