jquery 插件开发方法小结


Posted in Javascript onOctober 23, 2009

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 问答知识整理
Feb 11 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
实测jquery data()如何存值
Aug 18 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 #Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 #Javascript
JavaScript 常用函数库详解
Oct 21 #Javascript
再谈ie和firefox下的document.all属性
Oct 21 #Javascript
javascript void(0)的妙用
Oct 21 #Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 #Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 #Javascript
You might like
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue mounted组件的使用
2018/06/18 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python实现超市商品销售管理系统
2019/11/22 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
一月红领巾广播稿
2014/02/11 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
新学期开学标语2015
2015/07/16 职场文书
婚庆答谢词大全
2015/09/29 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书