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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
公务员的自我鉴定
2013/10/26 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
个人综合鉴定材料
2014/05/23 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2016年少先队活动总结
2016/04/06 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书