扩展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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
js类型检查实现代码
Oct 29 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 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
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
Order by的几种用法
2013/06/16 面试题
海量信息软件测试笔试题
2015/08/08 面试题
高一课前三分钟演讲稿
2014/09/13 职场文书
2014年项目工作总结
2014/11/24 职场文书
博士论文答辩开场白
2015/06/01 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript