开发插件的两个方法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 相关文章推荐
js的event详解。
Sep 06 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
JS高级运动实例分析
Dec 20 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
详解ES6中的Map与Set集合
Mar 22 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
Python 操作MySQL详解及实例
2017/04/30 Python
详解Python pygame安装过程笔记
2017/06/05 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
建筑学推荐信
2013/11/03 职场文书
求职简历中的自我评价分享
2013/12/08 职场文书
2014的自我评价
2014/01/13 职场文书
企业承诺书格式
2014/05/21 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Python使用Web框架Flask开发项目
2022/06/01 Python