详谈$.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 相关文章推荐
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
vue-router传参用法详解
Jan 19 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
JS代码优化的8点建议
Feb 04 Javascript
js实现验证码干扰(动态)
Feb 23 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python常用函数与用法示例
2019/07/02 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
python基于opencv实现人脸识别
2021/01/04 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
幼儿园教师备课制度
2014/01/12 职场文书
前处理班长职位说明书
2014/03/01 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年科协工作总结
2014/12/09 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
如何写辞职信
2015/05/13 职场文书
初中政教处工作总结
2015/08/12 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL