详谈$.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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
js实现自定义右键菜单
May 18 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 冒泡排序 交换排序法
2011/05/10 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
用js遍历 table的脚本
2008/07/23 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
DOM 高级编程
2015/05/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python help()函数用法详解
2014/03/11 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
初三物理教学反思
2014/01/21 职场文书
教师读书活动总结
2014/05/07 职场文书
励志演讲稿500字
2014/08/21 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
公司年会开场白
2015/06/01 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL