扩展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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
0基础学习前端开发的一些建议
Jul 14 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实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
js实现网页随机验证码
2020/10/19 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
pandas中Timestamp类用法详解
2017/12/11 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python global全局变量函数详解
2018/09/18 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
深入了解python中元类的相关知识
2019/08/29 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
如何定义TensorFlow输入节点
2020/01/23 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
保安公司服务承诺书
2014/05/28 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
个人总结怎么写
2015/02/26 职场文书
幸福来敲门观后感
2015/06/04 职场文书
消防安全培训工作总结
2015/10/23 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers