Jquery-data的三种用法


Posted in jQuery onApril 18, 2017

记录一下

Jquery-data的用处:

jQuery-data主要是用来存储数据,帮助普通对象或者jQuery对象来存储数据,其实如果单纯的储存dom的单一的属性,用attr自定义属性足够了;如果存储多个键值对建议用jQuery-data;

例如: 图片的懒加载好多插件就用到了jquery-data,先把图片的真实地址储存到jquery-data中,做个监听事件,等到滑到该图片时再把真实地址取出来;

用法一:给普通对象储存单个属性和取值

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
 var obj = {};
 $.data(obj, 'name', 'xm'); // 赋值
 var str = $.data(obj, 'name'); // 读取值
 console.log(str) // "xm"

用法二:给普通对象储存多个属性和取值

<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
var obj = {};
 $.data(obj,{name1:"xm",name2:"xh"}); // 赋值
 var str1 = $.data(obj, 'name1'); // 读取值
 var str2 = $.data(obj, 'name2'); // 读取值
 console.log(str1) // "xm"
 console.log(str1) // "xh"

用法三:给Jquery dom对象取值赋值

<div class="demo"></div>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
var obj = $('.demo');
 $.data(obj,{name1:"xm",name2:"xh"}); // 赋值
 var str1 = $.data(obj, 'name1'); // 读取值
 var str2 = $.data(obj, 'name2'); // 读取值
 console.log(str1) // "xm"
 console.log(str1) // "xh"
// 就是把obj换成jquery对象这么简单

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
You might like
php基础知识:控制结构
2006/12/13 PHP
基于php 随机数的深入理解
2013/06/05 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP精确计算功能示例
2016/11/29 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
经典优秀个人求职信分享
2013/12/12 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
会员卡清退活动总结
2014/08/27 职场文书
大学生个人学年总结
2015/02/15 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
质检员岗位职责范本
2015/04/07 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
婚宴父亲致辞
2015/07/27 职场文书