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 相关文章推荐
js压缩利器
Feb 20 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 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通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php查询操作实现投票功能
2016/05/09 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
JavaScript 创建对象
2009/07/17 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
详解python中list的使用
2019/03/15 Python
Python中@property的理解和使用示例
2019/06/11 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python函数参数分类原理详解
2020/05/28 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
大学生自我推荐信范文
2015/03/24 职场文书
大学军训心得体会800字
2016/01/11 职场文书
成人成长感言如何写?
2019/08/16 职场文书