扩展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,超强推荐share.js
Dec 23 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
Javascript复制实例详解
Jan 28 Javascript
浅析JS异步加载进度条
May 05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue 实现上传组件
May 31 Vue.js
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.ini中文版(2)
2006/10/09 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
一些不错的js函数ajax
2008/08/20 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python3多线程操作简单示例
2018/05/22 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python 默认参数相关知识详解
2019/09/18 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
青蓝工程实施方案
2014/03/27 职场文书
租房协议书怎么写
2014/04/10 职场文书
行政管理专业求职信
2014/07/06 职场文书
会计岗位职责
2015/02/03 职场文书
开学随笔
2015/08/15 职场文书