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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Add a Table to a Word Document
2007/06/15 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python列表计数及插入实例
2014/12/17 Python
python 实现兔子生兔子示例
2019/11/21 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python用SSH连接到网络设备
2021/02/18 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
《梅花魂》教学反思
2014/04/30 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
教师网络培训心得体会
2016/01/09 职场文书
销售会议开幕词
2016/03/04 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python