详谈$.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 相关文章推荐
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
node.js中watch机制详解
Nov 17 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js opener的使用详解
2014/01/11 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python中定义结构体的方法
2013/03/04 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
粗加工管理制度
2014/02/04 职场文书
安全生产汇报材料
2014/02/17 职场文书
晚会主持词开场白
2014/03/17 职场文书
施工协议书范本
2014/04/22 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技