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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python中你应该知道的一些内置函数
2017/03/31 Python
python实现k-means聚类算法
2018/02/23 Python
python实现自动发送邮件
2018/06/20 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
学校安全责任书范本
2014/07/23 职场文书
公司停电通知
2015/04/15 职场文书
干部培训简讯
2015/07/20 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书