开发插件的两个方法jquery.fn.extend与jquery.extend


Posted in Javascript onNovember 21, 2013

jQuery为开发插件提拱了两个方法,分别是:

JavaScript代码

jQuery.fn.extend(object); 
jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

JavaScript代码

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//….  

 //…… 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

XML/HTML代码

$.extend({ 
add:function(a,b){return a+b;} 
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
JavaScript代码
$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
JavaScript代码

$.fn.extend({ alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
关于JavaScript的一些看法
May 27 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
JS两种定义方式的区别、内部原理
Nov 21 #Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
You might like
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python中的字符串替换操作示例
2016/06/27 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
对Python w和w+权限的区别详解
2019/01/23 Python
Python变量访问权限控制详解
2019/06/29 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
竞选卫生委员演讲稿
2014/04/28 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
python实现商品进销存管理系统
2022/05/30 Python