jquery的extend和fn.extend的使用说明


Posted in Javascript onJanuary 09, 2011

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object); 
jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//....  

 //...... 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({ 
add:function(a,b){return a+b;} 
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
Javascript 相关文章推荐
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 #Javascript
理解JavaScript中的对象 推荐
Jan 09 #Javascript
最佳JS代码编写的14条技巧
Jan 09 #Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 #Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 #Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 #Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 #Javascript
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
ionic 自定义弹框效果
2017/06/27 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python 图像平移和旋转的实例
2019/01/10 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
python判断无向图环是否存在的示例
2019/11/22 Python
个人担保书范文
2014/05/20 职场文书
小学家长学校培训材料
2014/08/24 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Golang中异常处理机制详解
2021/06/08 Golang