详谈$.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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
前端微信支付js代码
Jul 25 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 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
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
取得父标签
2006/11/14 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python基础教程之异常详解
2019/01/10 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
汇智创新科技发展有限公司
2015/12/06 面试题
2014年党员个人剖析材料
2014/10/08 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis