使用jQuery操作data-attr的注意事项

今天又一次掉进这个坑里面。

data-attr是HTML5里面的一个新属性(其实这东西都好多年了),方便CSS\JS去读取DOM上面的属性值。

jQuery在很久之前,就封装了一个 $.fn.data() 的方法,而该方法是将数据存放在DOM内部的一个数据对象中。

在data-attr来了之后, $.fn.data() 也支持用来读取DOM上面的data-attr,但是,它会缓存这个结果到DOM内部的数据对象,他会缓存,缓存,缓存。

后续对这个key的所有读写操作,其实都是操作的这个数据缓存,而DOM上面的data-attr并不会发生任何变化。

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

如果你有一些样式,是希望同步这个data-attr的状态的,用 $.fn.data() 来操作就会发生一些奇怪的事情(之前一次没细看jQuery这块的实现,只是发现出来的效果怪怪的),建议改用 $.fn.attr() 方法或者JS原生方法。

附:

为了和 $.data() 做区分,我这里用 $.fn.attr() 和 $.fn.data() 这种jQuery原型链上的方法来表示 $(selector).data()

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Angular&服务

cordova扫描二维码

1743
来自专栏DeveWork

Google Chrome 浏览器 开发者工具 使用教程

对于Chrome 浏览器,除了占用内存的缺点,其他都很不错。对于Chrome 浏览器的开发者工具,Jeff 除了Elements、Resources、Netwo...

4836
来自专栏守候书阁

vue插件开发练习--实用弹窗

上回说了组件(vue组件开发练习--焦点图切换)的一个练习项目,这次换下口味,说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件,这个可能就更简单了,...

1582
来自专栏Jerry的SAP技术分享

使用JavaScript将当前页面保存成PDF,支持图片和文字的保存

前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件。如果采用屏幕截图的话,默认Windows操作系统的截...

7062
来自专栏CSDN技术头条

Python 开发者的微信小程序开发实践

导读 在知乎上,有人提问“如何使用 Python 开发微信小程序”。 ? 其实微信小程序作为一个前端的机制,Python 并不能插上边。只不过可以作为后端接口...

1.3K7
来自专栏Petrichor的专栏

tkinter: 事件 & 绑定 (Events and Bindings)

1272
来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

作者:汪娇娇 时间:2017年8月30日 1、npm淘宝镜像 直接用npm安装vue-cli会特别慢,在安装vue-cli之前可以先安装一个淘宝镜像。之后的安装...

3194
来自专栏计算机视觉与深度学习基础

个人vim配置文件

runtime! debian.vim if has("syntax") syntax on endif if filereadable("/etc/vim...

2675
来自专栏小狼的世界

jQuery的attr方法处理checkbox的问题

使用了 jQuery 1.10 的版本,想实现 checkbox 的全部选中和全部取消选中,使用了 attr 的方法,如下:

1171
来自专栏云加头条

如何开通微信公众号同步?(浏览器打开)

截屏小Tip:可同时按住开机键+home键,完成截屏

70010

扫码关注云+社区

领取腾讯云代金券