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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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 404错误页面实现代码
2009/06/22 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
PHP xpath()函数讲解
2019/02/11 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python装饰器用法示例小结
2018/02/11 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
小学学校评估方案
2014/06/08 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
历史博物馆观后感
2015/06/05 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python