详谈$.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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
vue实现树状表格效果
Dec 29 Vue.js
基于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处理restful请求的路由类分享
2014/02/27 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php生成rss类用法实例
2015/04/14 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
python常用函数详解
2016/09/13 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
年度考核个人总结
2015/03/06 职场文书
陪护人员误工证明
2015/06/24 职场文书
培训简讯范文
2015/07/20 职场文书
Python函数中apply、map、applymap的区别
2021/11/27 Python