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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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文件缓存内容保存格式实例分析
2014/08/20 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
python 字典(dict)按键和值排序
2016/06/28 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
如何获得EntityManager
2014/02/09 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Redis基本数据类型List常用操作命令
2022/06/01 Redis