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中的绑定与解绑函数应用示例
Jun 24 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解vue的diff算法原理
May 20 Javascript
详解webpack 热更新优化
Sep 13 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP可变变量学习小结
2015/11/29 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js倒计时抢购实例
2015/12/20 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python实现感知器算法详解
2017/12/19 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python+requests接口自动化框架的实现
2020/08/31 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
承诺书怎么写
2014/03/26 职场文书
干部理论学习心得体会
2016/01/21 职场文书