老生常谈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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
常用jQuery选择器总结
Jul 11 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
用原生js做单页应用
Jan 17 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 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小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP调用其他文件中的类
2018/04/02 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
python类定义的讲解
2013/11/01 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python如何实现文本转语音
2016/08/08 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python队列原理及实现方法示例
2019/11/27 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
市政工程技术专业自荐书
2014/07/06 职场文书
售房协议书
2014/08/19 职场文书
公司开业主持词
2015/07/02 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
68句权威创业名言
2019/08/26 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python