开发插件的两个方法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_14_函数形式参数与arguments
Oct 20 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python调用java的jar包方法
2018/12/15 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
网游商务专员求职信
2013/10/15 职场文书
精细化工应届生求职信
2013/11/17 职场文书
植树节活动总结
2014/04/30 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
营销计划书
2015/01/17 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python