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之验证框validatebox实例详解
Apr 10 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jquery实现手风琴案例
May 04 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jquery自定义组件实例详解
Dec 31 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
js密码强度校验
2015/11/10 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
vue实例的选项总结
2020/06/09 Javascript
使用Kivy将python程序打包为apk文件
2017/07/29 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Python 类的特殊成员解析
2018/06/20 Python
python实现简单学生信息管理系统
2020/04/09 Python
python中取绝对值简单方法总结
2020/07/24 Python
shallow copy和deep copy的区别
2016/05/09 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
《夏夜多美》教学反思
2014/02/17 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers