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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
学习ExtJS border布局
Oct 08 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
极典R601SW收音机
2021/03/02 无线电
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
javascript基本算法汇总
2016/03/09 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
怎么写有吸引力的自荐信
2013/11/17 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
关于元旦的广播稿
2014/02/16 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
三好学生个人总结
2015/02/15 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL