开发插件的两个方法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实现的支持lrc歌词的播放器
May 17 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
详解Puppeteer 入门教程
May 09 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
判断单链表中是否存在环
2012/07/16 面试题
广州盈通面试题
2015/12/05 面试题
网络工程师的自我评价
2013/10/02 职场文书
加工操作管理制度
2014/01/19 职场文书
火箭队口号
2014/06/18 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android
JavaScript实现音乐播放器
2022/08/14 Javascript