开发插件的两个方法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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
jquery事件与绑定事件
Mar 16 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 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
php巧获服务器端信息
2006/12/06 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
php时间戳转换的示例
2014/03/31 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python调试神器PySnooper的使用
2019/07/03 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python入门之井字棋小游戏
2020/03/05 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python实现一个优先级队列的方法
2020/07/31 Python
详解Django中异步任务之django-celery
2020/11/05 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
高二英语教学反思
2014/01/19 职场文书
英语国培研修感言
2014/02/13 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
个人授权委托书模板
2014/09/14 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL