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 相关文章推荐
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
论JavaScript模块化编程
Mar 07 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP对象实例化单例方法
2017/01/19 PHP
JavaScript事件列表解说
2006/12/22 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Python中实现常量(Const)功能
2015/01/28 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python db类用法说明
2020/07/07 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
详解Python模块化编程与装饰器
2021/01/16 Python
numpy实现RNN原理实现
2021/03/02 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
小学中秋节活动方案
2014/02/06 职场文书
股份合作协议书
2014/04/12 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2019年入党思想汇报
2019/03/25 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书