详谈$.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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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开源建站平台小结
2010/04/22 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php阳历转农历优化版
2016/08/08 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
ubuntu上安装python的实例方法
2019/09/30 Python
python列表返回重复数据的下标
2020/02/10 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
合伙经营协议书范本
2014/09/13 职场文书
股东授权委托书范本
2014/09/13 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技