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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
javascript 跳转代码集合
Dec 03 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
javascript 写类方式之四
2009/07/05 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python常用库推荐
2016/12/04 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python的文件操作方法汇总
2017/11/10 Python
python实现类之间的方法互相调用
2018/04/29 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
农场厂长岗位职责
2013/12/28 职场文书
社区中秋节活动方案
2014/01/29 职场文书
二婚主持词
2015/06/30 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python