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对html元素取值与赋值的方法
Nov 20 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
岗位聘任书范文
2014/03/29 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
建筑管理专业求职信
2014/07/28 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers