开发插件的两个方法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 相关文章推荐
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
Javascript 面向对象特性
2009/12/28 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
理发店策划方案
2014/06/05 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书