jquery插件开发方法(初学者)


Posted in Javascript onFebruary 03, 2012

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 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
详解Bootstrap按钮
Jan 04 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
jquery插件制作简单示例说明
Feb 03 #Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 #Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 #Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 #Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 #Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 #Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 #Javascript
You might like
php array_map()数组函数使用说明
2011/07/12 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python语言元素知识点详解
2019/05/15 Python
python数据预处理方式 :数据降维
2020/02/24 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python 模拟登陆163邮箱
2020/12/15 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
市级优秀班主任事迹材料
2014/05/13 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
中小学生学籍证明
2014/10/25 职场文书
围城读书笔记
2015/06/26 职场文书
公司借款担保书
2015/09/22 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Python Parser的用法
2021/05/12 Python