扩展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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python文件和流(实例讲解)
2017/09/12 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
优秀家长事迹材料
2014/05/17 职场文书
广播体操比赛口号
2014/06/10 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
公司文体活动总结
2015/05/07 职场文书
离婚起诉书范本
2015/05/18 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
Python使用openpyxl模块处理Excel文件
2022/06/05 Python