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中变量提升 Hoisting
Jul 03 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 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中其实也可以用方法链
2011/11/10 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
优秀员工自荐书
2013/12/19 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
生产设备维护保养制度
2015/08/06 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL