开发插件的两个方法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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
jquery移动节点实例
Jan 14 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
PHP中的float类型使用说明
2010/07/27 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python中的函数作用域
2018/05/07 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
Python缓存技术实现过程详解
2019/09/25 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
python如何修改文件时间属性
2021/02/05 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
团员的自我评价
2013/12/01 职场文书
文明演讲稿范文
2014/05/12 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
英文导游词
2015/02/13 职场文书
英语通知范文
2015/04/22 职场文书
班级联欢会主持词
2015/07/03 职场文书
《火烧云》教学反思
2016/02/23 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers