扩展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 多级checkbox选择效果
Aug 20 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 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提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Node 代理访问的实现
2019/09/19 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python操作redis的方法
2015/07/07 Python
python实现xlsx文件分析详解
2018/01/02 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
公司租房协议书范本
2014/10/08 职场文书
市场部岗位职责
2015/02/12 职场文书
pandas数值排序的实现实例
2021/07/25 Python
pandas中对文本类型数据的处理小结
2021/11/01 Python