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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
javascript入门教程基础篇
Nov 16 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
js获取Get值的方法
Sep 29 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
详解如何理解vue的key属性
Apr 14 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
JavaScript中的私有成员
2006/09/18 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
RequireJs的使用详解
2017/02/19 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
详解Django admin高级用法
2019/11/06 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
公司合并协议书范本
2014/09/30 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
解决Python字典查找报Keyerror的问题
2021/05/26 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL
我的收音机情缘
2022/04/05 无线电
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技