jquery data和 jquery attr, js getAttribute 有着本质的区别,并且无法用$(el).data('property')的方法,去获取$(el).attr('data-property')和 getAttribute('property')的值

jquery data 是一种缓存机制

用法如下:

data()方法

//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>

//获取属性
var appid = $("#myDiv").data("appid"); //
var app-id = $("#myDiv").data("app-id"); // //属性赋值 $("#myDiv").data("appid","666"); //最终HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div> 需要注意的是,data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。data()的本质其实是将一个 “cache” 附加到了对象上,并使用了一个特殊的属性名称。 所以上述代码中,虽然对div进行了data()赋值操作,但HTML代码中div的data-appid的值仍然为123,因为data()只是修改了缓存的那个值,此时进行$('#myDiv').data("appid")的操作,输出的结果为666.

参考文档: http://www.cnblogs.com/lzijian/p/6322868.html

jquery data的用法的更多相关文章

  1. 转:jQuery.data

    原文地址:http://www.it165.net/pro/html/201404/11922.html 内存泄露 首先看看什么是内存泄露,这里直接拿来Aaron中的这部分来说明什么是内存泄露,内存泄 ...

  2. jQuery $.post $.ajax用法

    jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...

  3. jQuery trigger one用法

    jQuery trigger one用法: <%@ page language="java" import="java.util.*" pageEncod ...

  4. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  5. jQuery对象数据缓存Cache原理及jQuery.data详解

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...

  6. Jquery.Data()和HTML标签的data-*属性

    Jquery.Data()和HTML标签的data-*属性 一.总结 一句话总结: 在页面中用到要用标签存数据还是用HTML标签的data-*属性,这样 不会破坏html本身的结构 1.使用HTML标 ...

  7. jQuery data

    大家会如何设计一个缓存呢? 一个简单的Cache (function(){ var __cache = {}, Cache = { get: function(__name){ return __ca ...

  8. Jquery remove 高级用法

    Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...

  9. jQuery.Data源码

    jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储原理 这个原理很简单,原本要添加在DOM元素本身的数据,现在被集中的存储在cach ...

随机推荐

  1. CF Round #569 Div2(contest1180)

    比赛链接:http://codeforces.com/contest/1180 Problem A 题意:给出n,问方块数.看图理解... Solution: 找一找规律就可以了,发现方块数为2n*( ...

  2. 157. [USACO Nov07] 奶牛跨栏(第三次考试大整理)

    157. [USACO Nov07] 奶牛跨栏 输入文件:hurdles.in   输出文件:hurdles.out   简单对比 时间限制:1 s   内存限制:128 MB 译 by CmYkRg ...

  3. java开发需掌握技能2

    1.了解Dubbo+Zookeeper面向服务SOA架构.SpringCloud+Eureka微服务架构.ActiveMQ消息通讯模式.RocketMQ分布式消息.Zookeeper集群.Redis缓 ...

  4. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  5. legend3---Homestead常用操作代码

    legend3---Homestead常用操作代码 一.总结 一句话总结: 在虚拟机里面改变文件windows里面也会变,在windows里面改变虚拟机里面也会变,所以可以在windows里面编程或者 ...

  6. seleniumIDE回放找不到页面元素

    seleniumIDE回放找不到页面元素 如下所示,自动回放就报错,手动执行就不报错.

  7. 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

  8. jest 提示 Unexpected identifier 的解决方案

    概述 今天在玩 jest 的时候,发现用 import 就会报 Unexpected identifier 的错误.查了很久的资料,最后终于解决了. 参考资料:Jest tests can't pro ...

  9. MYSQL启用数据库错误:ERROR 2002 (HY000)

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) MYSQL服务 ...

  10. C# 获取当前网页HTML

    //引用COM组件 //Microsoft HTML Object Library //Microsoft Internet Controls SHDocVw.ShellWindows shellWi ...