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操作之效果详解
May 19 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery treeview树形结构应用
Mar 24 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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php自定义session示例分享
2014/04/22 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
js function定义函数使用心得
2010/04/15 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python读写json文件的简单实现
2017/04/11 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python实现简单的购物程序代码实例
2020/03/03 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
你对IPv6了解程度
2016/02/09 面试题
教导处工作制度
2014/01/18 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
开学典礼致辞
2015/07/29 职场文书
原生JS实现分页
2022/04/19 Javascript