扩展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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
如何优化vue打包文件过大
Apr 13 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
单位绩效考核方案
2014/05/11 职场文书
中秋手机店促销方案
2014/06/16 职场文书
校车安全责任书
2014/08/25 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
烟台的海导游词
2015/02/02 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书