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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
JS实现简单抖动效果
Jun 01 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
js实现水平滚动菜单导航
Jul 21 Javascript
iview table高度动态设置方法
Mar 14 Javascript
react MPA 多页配置详解
Oct 18 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
PHP 上传文件的方法(类)
2009/07/30 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python回调函数的使用方法
2014/01/23 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python设置值及NaN值处理方法
2018/07/03 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
天游软件面试
2013/11/23 面试题
介绍一下Linux中的链接
2016/05/28 面试题
应届生个人求职信模板
2013/11/26 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
体检通知范文
2015/04/21 职场文书
2015年销售助理工作总结
2015/05/11 职场文书