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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现推拉门效果
Oct 19 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 变量未定义等错误的解决方法
2011/01/12 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
JSONP基础知识详解
2017/03/19 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
pandas数值计算与排序方法
2018/04/12 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
企业为何需要商业计划书
2013/12/26 职场文书
大三学习计划书范文
2014/05/02 职场文书
学校教研活动总结
2014/07/02 职场文书
丧事主持词
2015/07/02 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL