扩展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 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery功能函数详解
2015/02/01 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
初学Python实用技巧两则
2014/08/29 Python
python操作mysql代码总结
2018/06/01 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
深入了解python中元类的相关知识
2019/08/29 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
给学校的建议书
2014/03/12 职场文书
食品业务员岗位职责
2014/03/18 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
红歌会主持词
2015/07/02 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
消防安全培训工作总结
2015/10/23 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
Python实现双向链表基本操作
2022/05/25 Python