详谈$.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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
论建造顺序的重要性
2020/03/04 星际争霸
用Zend Encode编写开发PHP程序
2010/02/21 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
TensorFlow打印tensor值的实现方法
2018/07/27 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python 通过文件夹导入包的操作
2020/06/01 Python
python在地图上画比例的实例详解
2020/11/13 Python
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
装潢设计专业推荐信模板
2013/11/26 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript