资讯专栏INFORMATION COLUMN

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

Allen / 2679人阅读

摘要:今天又一次掉进这个坑里面。后续对这个的所有读写操作,其实都是操作的这个数据缓存,而上面的并不会发生任何变化。附为了和做区分,我这里用和这种原型链上的方法来表示同步发表于我的博客

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

data-attr是HTML5里面的一个新属性(其实这东西都好多年了),方便CSSJS去读取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()

同步发表于我的博客

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78472.html

相关文章

  • CSS(六)

    摘要:权重权重权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用权重相同的,后写的样式会覆盖前面写的样式。CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级,按照等级来计算权重 1、!important,加在样式属性值后,权...

    番茄西红柿 评论0 收藏0
  • 使用Nightwatch进行E2E测试中文教程

    摘要:本身项目也是使用来测试的。一个简易的模式的配置如下的分为四个部分在实例上以开头的行为驱动测试风格的接口,及以上版本可用。例如以开头的两套相同的方法库,区别是如果断言失败则退出整个测试用例所有步,则打印后继续进行。 E2E测试 E2E(end to end)测试是指端到端测试又叫功能测试,站在用户视角,使用各种功能、各种交互,是用户的真实使用场景的仿真。在产品高速迭代的现在,有个自动化测...

    newsning 评论0 收藏0
  • Python开发【前端篇】HTML5+CSS3

    摘要:权重权重权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用权重相同的,后写的样式会覆盖前面写的样式。标签支持格式属性可选第三方播放器CSS权重 CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。 权重的等级 可以把样式的应用方式分为几个等级,按照等级来计算权重 1、!impo...

    番茄西红柿 评论0 收藏0
  • jQuery 源码系列(十八)class 相关操作

    摘要:眼看的源码就快到头了,后面还有几个重要的内容,包括和动画操作,加油把它们看完,百度前端学院的新一批课程也开始了。,当第二个参数为的情况,就是,为时,,从源码来看,就是直接调用的这两个函数。参考源码分析样式操作本文在上的源码地址,欢迎来。 欢迎来我的专栏查看系列文章。 眼看 jQuery 的源码就快到头了,后面还有几个重要的内容,包括 ajax 和动画操作,加油把它们看完,百度前端学院的...

    BingqiChen 评论0 收藏0
  • 写一个更好 Javascript DOM 库

    摘要:我们快速地看一下扩展原生的动画内置的微模板国际化的支持扩展有一个叫做事件的概念。内置的微模板字符串冗长而繁琐。比如这段与对应的微模板比较在中,任何接受的方法同样接受表达式。 目前,jQuery是事实上的操作文档对象模型(DOM)的库。它可以与流行的客户端MV*框架结合使用,并且拥有大量的插件与大型的社区。开发者对于Javascript的兴趣与日俱增的同时,很多人开始好奇,原生的API是...

    Cc_2011 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<