专栏首页Web 开发使用jQuery操作data-attr的注意事项

使用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 条评论
登录 后参与评论

相关文章

  • 用madge来绘制项目的依赖图

    今天早上刚发现,很犀利的一个模块依赖检查工具,并可以可视化的绘制出来,支持AMD\CommonJS\ES6等模块依赖。

    libo1106
  • 在SAE上开发遇到的问题~

    添加一个escape_data()的函数,该函数已经会自动识别各种PHP配置环境~

    libo1106
  • 第一双AIR FORCE

    终于有了一双正品的AIR FORCE了,虽然之前已经有了一双AIR FORCE 1了,但只是高仿,并非真品。而这次的AIR FORCE 25 LOW可是一双货真...

    libo1106
  • R分类算法-神经网络算法

    神经网络(Artifical Neural Network) 神经网络(人工神经网络),是一种模仿生物网络(动物的中枢神经系统,特别是大脑)的结构和功能的数学模...

    Erin
  • 从0到1掌握R语言网络爬虫

    引言 网上的数据和信息无穷无尽,如今人人都用百度谷歌来作为获取知识,了解新鲜事物的首要信息源。所有的这些网上的信息都是直接可得的,而为了满足日益增长的数据需求,...

    小莹莹
  • 使用脚手架应用做单元测试

    因为后台service比较复杂,需要三个不同的实例协同工作,所以之前Oliver开发了Scaffolding App这个Angular前端,目的是方便我们随时测...

    Jerry Wang
  • 【go】剑指offer:常见排序算法

    冒泡排序是比较简单的排序算法,它的关键思想是移动指针不断的进行两两比较,将最大的数字不断的进行更换位置,直至到最后,即完成一趟比较,都会寻找到最大的数字,且最大...

    陌无崖
  • go实现利用最大堆寻找最小k个数

    昨天分享了寻找最小k个数的算法是,那么有没有更为迅速的方法呢?今天就来分享关于如何使用最大堆进行解决。

    陌无崖
  • 通过空气质量指数AQI学习统计分析并进行预测(上)

    AQI(空气质量指数),用来衡量空气清洁或者污染的程度。值越小,表示空气质量越好。近年来,因为环境问题,空气质量也越来越受到人们的重视。

    朱小五
  • 使用 Python 实现几种常见的排序算法

    冒泡排序是最为基础的排序算法,其核心思想就是相邻元素两两比较,把较大的元素放到后面,在一轮比较完成之后,最大的元素就位于最后一个位置了,就好像是气泡,慢慢的浮出...

    周萝卜

扫码关注云+社区

领取腾讯云代金券