详谈$.data()的用法和作用


Posted in Javascript onFebruary 13, 2017

jQuery.data 即$.data()。向元素附加数据,然后取回该数据

这是提供给客户端程序员使用的方法,它同时是setter/getter。

传一个参数,返回附加在指定元素的所有数据,即thisCachejQuery.data(el); // thisCache

传二个参数,返回指定的属性值jQuery.data(el, 'name');

传三个参数,设置属性及属性值jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});

传四个参数,第四个参数pvt仅提供给jQuery库自身使用。即jQuery._data方法中传true。因为jQuery的事件模块严重依赖于jQuery.data,为避免人为的不小心重写在这个版本中加入的

$.data("#blog_stats","name","lixuekai")
jquery.js:2 Uncaught TypeError: Cannot set property 'toJSON' of undefined(…)data @ jquery.js:2(anonymous function) @ VM913:1
var s = $("#blog_stats")
undefined
s
[<div id=​"blog_stats">​…​</div>​]
$.data(s,"name","lixuekai")
"lixuekai"
$.data(s,"name")
"lixuekai"
$.data(s)
Object {name: "lixuekai"}
$.hasData(s)

true上面代码的调试图如下:

详谈$.data()的用法和作用

jQuery.hasData 用来判断HTMLElement或JS对象是否具有数据。返回true或false。即如果调用了jQuery.data方法添加了属性,则返回true。

升级简单的写法:selector.data("key","value").

实测如下图:

详谈$.data()的用法和作用

这是一个位置给装了2个对象数据。然后看看效果如何。

就看截图吧,代码就不贴啦。

//从被选元素中返回附加的数据。
$(selector).data(name)

//向被选元素附加数据。
$(selector).data(name,value)

//使用带有名称/值对的对象向被选元素添加数据。(上面传简单的key value 键值对,这个直接给对象,不用一个个传)
$(selector).data(object)

以上这篇详谈$.data()的用法和作用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 #Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 #Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 #Javascript
JS中input表单隐藏域及其使用方法
Feb 13 #Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 #Javascript
jQuery源码分析之init的详细介绍
Feb 13 #Javascript
You might like
php读取csc文件并输出
2015/05/21 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
JavaScript实现简单评论功能
2017/08/17 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
vscode调试django项目的方法
2020/08/06 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
大学生个人自荐信样本
2014/03/02 职场文书
市政管理求职信范文
2014/05/07 职场文书
教师暑期培训感言
2014/08/15 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
学校师德师风整改方案
2014/10/28 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
运动会通讯稿600字
2015/07/20 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis