开发插件的两个方法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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
javascript数组去重小结
Mar 07 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 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
星际中的相关伤害
2020/03/04 星际争霸
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python 全文检索引擎详解
2017/04/25 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python for和else语句趣谈
2019/07/02 Python
Python实现序列化及csv文件读取
2020/01/19 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
高校教师岗位职责
2014/03/18 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS