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 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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读取IMAP邮件
2006/10/09 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php统计数组元素个数的方法
2015/07/02 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
自动更新作用
2006/10/08 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Django中的Model操作表的实现
2018/07/24 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
使用python+whoosh实现全文检索
2019/12/09 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
一份Java笔试题
2012/02/21 面试题
关于圣诞节的广播稿
2014/01/26 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
执行力心得体会范文
2016/01/11 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android