data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。

简单的说就是html元素可以通过data-*属性存一些数据,类似于一个map,如果我们想在html的元素上额外的存一些东西是非常方便的。

一:读取是没问题的
比如我们读取div中data-num的数据:
<div id="div1" data-num="1">
dataSet
</div>

分别用jquery和js的方法读取,结果都是1。

二:修改就有坑了
但是修改的data-num的时候就有意思了:

jquery设置data-num中的值为2
jquery读取值的值是2
js读取值的值是1,奇怪,查看下html元素

data-num的值还是1。。。

这个坑,坑了我一早上,后来百度下才知道,原来jquery设置的值是在缓存里。。。
果断查看下jquery的源码,真相都在代码里:

三:正确的使用方式
如果需要修改dom元素上的data必须用js的方式:
document.getElementById("div1").dataset.num = "3"

四:结论
jquery用缓存的方式,无疑是为了提高读写的效率,但是缓存是个双刃剑,方便我们使用的同时往往还是带来困扰。建议对data的操作要统一,都用jquery或者都用js方式,不要混着用,如果要改变dom上元素的值那只能用js的方式。

PS:类似缓存的坑还有java中的Integer类,Integer中的-128到127的值是存在缓存中的

所以两个Integer的值相互比较的时候,如果值在-128和127之间,两个数相同,用 == 号会返回true,在-128和127范围之外会返回false,给人造成额外的困扰,切记在java中Integer的比较一定要用equals()方法。

jquery 操作HTML data全局属性缓存的坑的更多相关文章

  1. jQuery -- 光阴似箭(三):jQuery 操作 HTML 元素和属性

    jQuery -- 知识点回顾篇(三):jQuery拥有操作 HTML 元素和属性的强大方法. 1. 获取HTML 元素的内容和属性 (1) 获得内容:  text().html() 以及 val() ...

  2. jQuery操作元素的class属性

    今天在做一个菜单折叠插件的时候需要根据页面的url改变其class属性.jQuery操作元素的属性是非常方便的,在此记录一下: 1.给元素添加class属性: addClass(class) (1)添 ...

  3. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

  4. jQuery操作input改变value属性值

    今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值 类似于这样的效果 当用户点击的时候文字消失. html代码 < ...

  5. jQuery操作DOM基础 - 元素属性的查看与设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  7. jQuery 源码分析(十) 数据缓存模块 data详解

    jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...

  8. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  9. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

随机推荐

  1. JavaScript规定了几种语言类型?

    JavaScript中的每一个值都有它自己的类型,JavaScript规定了七种语言类型: 1.Undefined 2.Null 3.Boolean 4.String 5.Number 6.Symbo ...

  2. VS Code真机测试步骤

    VS Code真机测试步骤 前提:你的电脑跟你的手机是在同一个网络环境下.电脑连手机热点: 1. 在扩展里搜索live server,下载安装: 2. 打开cmd 命令窗口(快捷键是win+r): 输 ...

  3. 常用URL分享,实用地址

    常用地址 文库文档免费下载地址1:http://www.hiwenku.com/ 文库文档免费下载下载2:http://www.20009.net/wk.html google地图拾取器:http:/ ...

  4. 深入理解 Kafka 副本机制

    一.Kafka集群 二.副本机制         2.1 分区和副本         2.2 ISR机制         2.3 不完全的首领选举         2.4 最少同步副本         ...

  5. Redis---学习笔记(更新中)

    一.基本命令 #查看所有键 keys * #查看指定键 keys key #查看模糊键 keys ke* keys ke? keys ke[a-z] keys ke\? #判断键是否存在 exists ...

  6. 微信jssdk支付坑

    1.使用easywechat开发的时候,由于没有注意,配置文件中默认的请求地址是 https://api.weixin.qq.com/结果调试了半天,一直报错“40066” 这也是怪自己粗心,结果去分 ...

  7. 学习kafka自己发生的几个小错误记录

    一.  The method iterator() is ambiguous ConsumerIterator<byte[],byte[]> it =stream.iterator(); ...

  8. Linux搭建DHCP服务器

    Linux搭建DHCP服务器   实验目标: 通过本实验掌握基于Linux的DHCP服务器搭建技能. 本实验包含内容为yum的认识与使用,磁盘挂载的概念与使用,DHCP原理及配置,systemctl服 ...

  9. Linux环境下虚拟环境virtualenv安装和使用(转)

    virtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够: 1. 在没有权限的情况下安装新套件 2. 不同应用可以使用不同的套件版本 3. 套件升级不影响其他应用 ...

  10. 关于pcl索引的使用

    最近开始动手做实验,之前写了一个小实验利用到了PCL库中的索引: 现在在写利用PCL中的RegionGrowing类来分割生成面片,无论是迭代生成还是进行提取都需要用到pcl库中定义的索引, 虽然搞的 ...