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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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分页函数示例代码分享
2014/02/24 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python获取当前路径实现代码
2017/05/08 Python
Python命令行解析模块详解
2018/02/01 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Django-imagekit的使用详解
2020/07/06 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫