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. Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转

    同一文档,在不同的文档查看器或者编译环境中,需要对该文档进行相应的格式转换.下面的内容中,将介绍通过Java编程来实现PPT文档格式转换的方法. 使用工具: Spire.Presentation fo ...

  2. Python自学day-9

    一.paramiko模块 (第三方模块,需安装依赖包) paramiko模块基于SSH来连接远程主机并进行相关操作. SSHClient:用于连接远程主机并执行基本命令. import paramik ...

  3. oracle 和 mysql 常用语句对比汇总

    文章目录 一.数据库管理 1.1 用户管理 1.1.1 mysql用户.权限管理 1.1.2 oracle 用户.角色.权限管理 二.DQL 语句 2.1 基础查询 1.常量查询的区别: 2.字符串拼 ...

  4. 纯异步nodejs文件夹(目录)复制

    思路: 1.callback 驱动 2.递归所有需要复制文件 3.在一定阀值下并发复制文件 4.运行需要安装 async.js     npm install async 代码如下: var asyn ...

  5. 【设计模式】行为型04迭代器模式(Iterator Pattern)

    学习地址:http://www.runoob.com/design-pattern/iterator-pattern.html 迭代器模式,简单来说就是通过迭代的方式对集合进行遍历,在集合的学习中也一 ...

  6. 汇编入门二 一些概念与PC组件

    1.内存:想让CPU工作,必须提供指令与数据,而指令和数据存在于内存中. 2.指令和数据:有点抽象,上书(汇编语言 第二版): 3.存储单元:存储器(内存)被划分为多个存储单元,内个存储单元从0开始顺 ...

  7. 【朝花夕拾】Android自定义View篇之(六)Android事件分发机制(中)从源码分析事件分发逻辑及经常遇到的一些“诡异”现象

    前言 转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...

  8. C/C++应用程序内存泄漏检查统计方案

    一.前绪 C/C++程序给某些程序员的几大印象之一就是内存自己管理容易泄漏容易崩,笔者曾经在一个产品中使用C语言开发维护部分模块,只要产品有内存泄漏和崩溃的问题,就被甩锅“我的程序是C#开发的内存都是 ...

  9. 50道SQL练习题及答案与详细分析!!!

    以前在学校还没有很认真地意识到,现在到了企业才发现sql是那么的重要,看到网上有很多的sql 练习题,特地拿来练练手! 数据表介绍 --1.学生表 Student(SId,Sname,Sage,Sse ...

  10. python的比较关系运算符和逻辑运算符

    比较运算符 运算符 描述 示例 == 检查两个操作数的值是否相等,如果是则条件变为真. 如a=2,b=2则(a == b) 为 true. != 检查两个操作数的值是否相等,如果值不相等,则条件变为真 ...