扩展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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python中类的初始化特殊方法
2017/12/01 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
党支部书记岗位责任制
2014/02/11 职场文书
党组织公开承诺书
2014/03/29 职场文书
詹天佑教学反思
2014/04/30 职场文书
工作岗位说明书模板
2014/05/09 职场文书
庆七一宣传标语
2014/10/08 职场文书
儿园租房协议书范本
2014/12/02 职场文书
锅炉工岗位职责
2015/02/13 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书