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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
JS中多层次排序算法的实现代码
Jan 06 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
大师制作的中短波矿石收音机
2020/04/02 无线电
基于mysql的bbs设计(一)
2006/10/09 PHP
php定时执行任务设置详解
2015/02/06 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python三引号输出方法
2019/02/27 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python执行时间的几种计算方法
2020/07/31 Python
公务员培训自我鉴定
2013/09/19 职场文书
应届大学生自荐信
2013/12/05 职场文书
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
高一新生军训方案
2014/05/12 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
计划生育汇报材料
2014/12/26 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers