开发插件的两个方法jquery.fn.extend与jquery.extend


Posted in Javascript onNovember 21, 2013

jQuery为开发插件提拱了两个方法,分别是:

JavaScript代码

jQuery.fn.extend(object); 
jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

JavaScript代码

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//….  

 //…… 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

XML/HTML代码

$.extend({ 
add:function(a,b){return a+b;} 
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
JavaScript代码
$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
JavaScript代码

$.fn.extend({ alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
vue实现一拉到底的滑动验证
Jul 25 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
JS两种定义方式的区别、内部原理
Nov 21 #Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python制作词云的方法
2018/01/03 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python set内置函数的具体使用
2019/07/02 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
行政部总经理岗位职责
2014/01/04 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
校园广播稿精选
2014/10/01 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
先进典型事迹材料
2014/12/29 职场文书
个人汇报材料范文
2014/12/30 职场文书
会议通知
2015/04/15 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
nginx内存池源码解析
2021/11/20 Servers