开发插件的两个方法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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
php基于redis处理session的方法
Mar 14 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
层叠菜单的动态生成
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
css配合jquery美化 select
2013/11/29 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Django中的Model操作表的实现
2018/07/24 Python
django中media媒体路径设置的步骤
2019/11/15 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
师范毕业生自荐信
2013/10/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
班风口号
2014/06/18 职场文书
《日月潭》教学反思
2016/02/20 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP