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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Vue.js 踩坑记之双向绑定
May 03 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中遍历二维数组的几种方法详解
2013/06/08 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php内嵌函数用法实例
2015/03/20 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
PHP代码加密的方法总结
2020/03/13 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python函数中定义参数的四种方式
2014/11/30 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python如何急速下载第三方库详解
2020/11/02 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
优秀团员事迹材料
2014/12/25 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
java调用Restful接口的三种方法
2021/08/23 Java/Android
一文搞懂Java中的注解和反射
2022/06/21 Java/Android