扩展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 相关文章推荐
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 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递归函数返回值使用方法
2013/02/18 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHP精确计算功能示例
2016/11/29 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
js loading加载效果实现代码
2009/11/24 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Python函数学习笔记
2008/10/07 Python
Python之PyUnit单元测试实例
2014/10/11 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
django 自定义过滤器的实现
2019/02/26 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
个人委托书怎么写
2014/04/04 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
开工典礼致辞
2015/07/29 职场文书
2015年中秋节主持词
2015/07/30 职场文书
高中生综合素质评价范文
2015/08/18 职场文书