老生常谈JQuery data方法的使用


Posted in Javascript onSeptember 09, 2016

(-1)说明

我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本

测试例子用到的showMessage方法如下

showMessage.i = 0; 
function showMessage(object) 
{ 
var body = $("body")[0]; 

var $p =$("#debugp"); 
 

if($p.length==0) 

{ 


$p = $("<p/>").attr("id","debugp"); 


$(body).prepend($p); 

} 

$p[0].innerHTML += "<br/>"+(showAttribute.i++)+" | "+object; 
}

(0)$.data(obj,key,value)

key值为字符串类型,为数字、对象(var lol={}),是没有意义的,value值可以为普通类型,当为引用类型时传递的是引用而不是克隆

a.

var obj = {"name":"寒冰射手","age":"12"};
$.data(obj,"height",165);
showMessage($.data(obj,"height"));

$.data实际将数据放在了对象属性上,类似于obj.sex="女",无论你通过$.data添加几个key给obj,在obj只会多出一个类似于jQuery300082932543555993442

300082932543555993442是jQuery产生的随机数,它指向一个对象,对象里面通过key-value的形式存储着你添加的数据

低版本可以通过for-in遍历出jQuery300082932543555993442,高版本只能通过debug工具查看了

b.

当value是一个对象时,传递的是引用

var husband = ["蛮族之王"];
var obj = {"name":"寒冰射手","age":"12"};
$.data(obj,"husband",husband);
$.data(obj,husband)[0] = "遁地龙卷风";
showMessage($.data(obj,husband));//输出   遁地龙卷风

(2)$(selector).data(key,value)

$("#lol").data("name","寒冰射手");

showMessage($("#lol").data("name"));

$(selector).data将数据绑定在HTML DOM元素上,剩下的特性与$.data方法一样,不过可以通过for-in得到添加的对象

以上这篇老生常谈JQuery data方法的使用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 #Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
再论Javascript下字符串连接的性能
2011/03/05 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
单链表反转python实现代码示例
2018/02/08 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
网络安全方面的面试题
2016/01/07 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
回门宴父母答谢词
2014/01/26 职场文书
无偿献血倡议书
2014/04/14 职场文书
大学学生个人总结
2015/02/15 职场文书
英文版辞职信
2015/02/28 职场文书
校园运动会广播稿
2015/08/19 职场文书
python基础之类方法和静态方法
2021/10/24 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技