jquery插件开发方法(初学者)


Posted in Javascript onFebruary 03, 2012

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调试工具(下载)
Jan 09 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
vue实现计步器功能
Nov 01 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
JavaScript 异步时序问题
Nov 20 Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 #Javascript
You might like
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
django修改models重建数据库的操作
2020/03/31 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
大学开学计划书
2014/04/30 职场文书
上班迟到检讨书
2014/09/15 职场文书
入党函调证明材料
2014/12/24 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015年工商所工作总结
2015/05/21 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
详解Laravel制作API接口
2021/05/31 PHP
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android