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插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery实现图片放大镜效果
Dec 23 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在线生成ico文件的代码
2007/10/09 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
在校生证明
2015/06/17 职场文书
七一晚会主持词
2015/06/29 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
详解PyTorch模型保存与加载
2022/04/28 Python