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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
小程序自定义模板实现吸顶功能
Jan 08 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
jquery实现上传图片功能
Jun 29 jQuery
vue 弹出遮罩层样式实例
Jul 22 Javascript
小程序实现列表展开收起效果
Jul 29 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
Bootstrap基础学习
2015/06/16 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
python文件操作整理汇总
2014/10/21 Python
Python判断字符串与大小写转换
2015/06/08 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
工作自我评价分享
2013/12/01 职场文书
一句话工作感言
2014/03/01 职场文书
食品安全宣传标语
2014/06/07 职场文书
倡导文明标语
2014/06/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
高三霸气励志标语
2014/06/24 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
MySQL sql模式设置引起的问题
2022/05/15 MySQL
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL