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 相关文章推荐
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
Vue watch响应数据实现方法解析
Jul 10 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
laravel框架创建授权策略实例分析
2019/11/22 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
Angularjs 基础入门
2014/12/26 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
详解javascript函数的参数
2015/11/10 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python可以实现栈的结构吗
2020/05/27 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
写求职信要注意什么问题
2014/04/12 职场文书
中学生评语大全
2014/04/18 职场文书
人代会标语
2014/06/30 职场文书
学校工作推荐信范文
2014/07/11 职场文书
技术经济专业求职信
2014/09/03 职场文书
护理医院见习报告
2014/11/03 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis