详谈$.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 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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模板类代码
2008/09/07 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
巧用canvas
2017/01/21 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
django使用channels实现通信的示例
2020/10/19 Python
高级Java程序员面试要点
2013/08/02 面试题
冰淇淋店创业计划书范文
2013/12/27 职场文书
老师对学生的评语
2014/04/18 职场文书
秋冬农业生产标语
2014/10/09 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Java8中接口的新特性使用指南
2021/11/01 Java/Android
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server