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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
关于ES6尾调用优化的使用
Sep 11 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开发中四种查询返回结果分析
2011/01/02 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
理解javascript异步编程
2016/01/27 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python SVM 线性分类模型的实现
2019/07/19 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python pymysql库的常用操作
2020/10/16 Python
详解python中的异常捕获
2020/12/15 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
中专毕业生自荐信
2013/11/16 职场文书
小学教师听课制度
2014/02/01 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
第一军规观后感
2015/06/12 职场文书
大学军训口号大全
2015/12/24 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript