开发插件的两个方法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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
Vue头像处理方案小结
Jul 26 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
springboot+vue实现文件上传下载
Nov 17 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
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
理解JS绑定事件
2016/01/19 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python的语言类型(详解)
2017/06/24 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
幼儿教师寄语集锦
2014/04/03 职场文书
分家协议书
2014/04/21 职场文书
2015年外联部工作总结
2015/04/03 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Django rest framework如何自定义用户表
2021/06/09 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python