扩展jQuery对象时如何扩展成员变量具体怎么实现


Posted in Javascript onApril 25, 2014

先看一段代码:

jQuery.fn.extend( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return this.myOwnMember; }, 
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; } 
} 
); $("body").myOwnMember; //3 
$("body").getMyOwnMember(); //3 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //3

这段代码给jQuery对象扩展了一个成员myOwnMember,两个函数getMyOwnMember,setMyOwnMember分别用于返回和设置myOwnMember的值。但是我们看到setMyOwnMember并没有起作用,我们再次getMyOwnMember时,返回的还是初始的值。这是为什么呢?原因在于$("body")每次都会创建一个新对象,所以每次$("body")里面的myOwnMember都是初始值。如果我们将代码改成:
jQuery.fn.extend( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return this.myOwnMember; }, 
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; } 
} 
); var body = $("body"); 
body.myOwnMember; //3 
body.getMyOwnMember(); //3 
body.setMyOwnMember(4); //4 
body.getMyOwnMember(); //4

这就是我们想要的效果了,这是因为$("body")只创建了一次,后面都是通过body变量进行的引用。但是这种方法在实际使用过程中还是存在问题,因为我不可能在全局范围内都能够引用到body变量,很多时候还是通过$("body")来获取dom节点,这样的话我们又怎么保存一个jQuery对象扩展变量的值呢?解决方法是我们不要把变量保存在jQuery对象上,而是保存在dom节点上,无论在一个dom节点上创建多少个jQuery对象,都是指向同一个dom节点的。所以我们将代码改成如下:
jQuery.fn.extend( 
{ 
getMyOwnMember: function () { return this[0].myOwnMember; }, 
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0].myOwnMember; } 
} 
); $("body").getMyOwnMember(); //undefined 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //4
Javascript 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
微信小程序全局变量功能与用法详解
Jan 22 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 #Javascript
jquery实现select选中行、列合计示例
Apr 25 #Javascript
js点击事件链接的问题解决
Apr 25 #Javascript
对js关键字命名的疑问介绍
Apr 25 #Javascript
html5+javascript制作简易画板附图
Apr 25 #Javascript
js实现字符串的16进制编码不加密
Apr 25 #Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 #Javascript
You might like
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php实现购物车功能(下)
2016/01/05 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Python中extend和append的区别讲解
2019/01/24 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python实现直播推流效果
2019/11/26 Python
基于keras中的回调函数用法说明
2020/06/17 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
社会实践心得体会
2014/01/03 职场文书
五年级英语教学反思
2014/01/31 职场文书
消防先进事迹材料
2014/02/10 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
学习党代会心得体会
2014/09/05 职场文书
车贷收入证明范本
2014/09/14 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
通知格式
2015/04/27 职场文书
观后感开头
2015/06/19 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL