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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
javascript 验证日期的函数
Mar 18 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
Javascript的无new构建实例详解
May 15 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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
SESSION存放在数据库用法实例
2015/08/08 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
浅谈js原生拖放
2016/11/21 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
javascript绘制简单钟表效果
2020/04/07 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python flask中静态文件的管理方法
2018/03/20 Python
python 对象和json互相转换方法
2018/03/22 Python
Python3实现转换Image图片格式
2018/06/21 Python
Django通过json格式收集主机信息
2020/05/29 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
东京审判观后感
2015/06/01 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
golang import自定义包方式
2021/04/29 Golang
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
java设计模式--建造者模式详解
2021/07/21 Java/Android