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 相关文章推荐
为原生js Array增加each方法
Apr 07 Javascript
js读取注册表的键值示例
Sep 25 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
js实现翻牌小游戏
Jul 31 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+java实现自动新闻滚动窗口
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
使用adodb lite解决问题
2006/12/31 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
Js基础学习资料
2010/11/23 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
Nuxt.js实战详解
2018/01/18 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
jQuery实现日历效果
2020/09/11 jQuery
vue中是怎样监听数组变化的
2020/10/24 Javascript
详解python解压压缩包的五种方法
2019/07/05 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
年度考核评语
2014/01/19 职场文书
项目合作意向书范本
2014/04/01 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
感谢信范文大全
2015/01/23 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
新闻稿格式范文
2015/07/18 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS