详谈$.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 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
angular6的响应式表单的实现
Oct 10 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
vue中使用router全局守卫实现页面拦截的示例
Oct 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
模拟flock实现文件锁定
2007/02/14 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
微信小程序实现滚动消息通知
2018/02/02 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
python提取页面内url列表的方法
2015/05/25 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
python虚拟环境迁移方法
2019/01/03 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
社保委托书怎么写
2014/08/02 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL