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 相关文章推荐
js实现用户注册协议倒计时的方法
Jan 21 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
JavaScript实现京东快递单号查询
Nov 30 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执行速率优化技巧小结
2008/03/15 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
PHP源码之explode使用说明
2011/08/05 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python 实现单例模式的5种方法
2020/09/23 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
新闻编辑自荐信
2013/11/03 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
英语故事演讲稿
2014/04/29 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书