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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
基于Vue中的父子传值问题解决
Jul 27 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使用者状态管理功能的应用
2006/10/09 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php实现分页显示
2015/11/03 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js jquery数组介绍
2012/07/15 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python实现截屏的函数
2015/07/25 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python实现聊天小程序
2018/03/13 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
C有"按引用传递"吗
2016/09/06 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
合伙经营协议书范本
2014/04/18 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
大学生团员个人总结
2015/02/14 职场文书
入党群众意见范文
2015/06/02 职场文书
校园新闻稿范文
2015/07/18 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers