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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
微信小程序 开发之全局配置
2017/05/05 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python生成随机mac地址的方法
2015/03/16 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python守护进程用法实例分析
2015/06/04 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
.net软件工程师面试题
2015/03/31 面试题
毕业生优秀推荐信
2013/11/26 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
会计求职简历自我评价
2015/03/10 职场文书
少年犯观后感
2015/06/11 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电