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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery中的deferred使用方法
Mar 27 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现聊天对话框
Feb 08 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
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
财务管理制度范本
2015/08/04 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python