扩展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 相关文章推荐
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
javascript html5实现表单验证
Mar 01 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
原生js实现日历效果
Mar 02 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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程序员的13个好习惯小结
2012/02/20 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
python保存字符串到文件的方法
2015/07/01 Python
Python实现批量下载图片的方法
2015/07/08 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
入学申请自荐信范文
2014/02/26 职场文书
工伤赔偿协议书
2014/04/15 职场文书
党员活动日总结
2014/05/05 职场文书
Django如何与Ajax交互
2021/04/29 Python