jquery 插件开发方法小结


Posted in Javascript onOctober 23, 2009

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 当前编辑框里的内容。可以这么做:
Java代码
$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/> 
$.fn.extend({ 
alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。
Javascript 相关文章推荐
jquery实现excel导出的方法
Apr 04 Javascript
JS检测图片大小的实例
Aug 21 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
vue组件name的作用小结
May 23 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
详解vue路由
Aug 05 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 #Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 #Javascript
JavaScript 常用函数库详解
Oct 21 #Javascript
再谈ie和firefox下的document.all属性
Oct 21 #Javascript
javascript void(0)的妙用
Oct 21 #Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 #Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 #Javascript
You might like
php操作SVN版本服务器类代码
2011/11/27 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python简单分割文件的方法
2015/07/30 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
"序列点" 是什么
2016/07/29 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
员工入职担保书范文
2014/04/01 职场文书
食品安全处置方案
2014/06/14 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
教师个人学习总结
2015/02/11 职场文书
毕业生学校组织意见
2015/06/04 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server