详谈$.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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
js实现拖拽功能
Mar 01 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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实现Ftp用户的在线管理
2012/02/16 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python获取中文字符串长度的方法
2018/11/14 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
Python如何生成xml文件
2020/06/04 Python
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
文秘求职信范文
2014/04/10 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
淘宝活动总结范文
2014/06/26 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫