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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
node.js文件操作系统实例详解
Nov 05 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代码
2006/12/06 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php数组转成json格式的方法
2015/03/09 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python迭代和迭代器详解
2016/11/10 Python
python实现二维插值的三维显示
2018/12/17 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python3字符串操作总结
2019/07/24 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python collections模块的使用
2020/10/16 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
介绍java中初始化块的使用
2012/09/11 面试题
服装采购员岗位职责
2014/03/15 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年外联部工作总结
2015/04/03 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书