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 相关文章推荐
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
js实现车辆管理系统
Aug 26 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获取当前页面完整URL的实现代码
2013/06/10 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
canvas轨迹回放功能实现
2017/12/20 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python中类的一些方法分析
2014/09/25 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python装饰器用法示例小结
2018/02/11 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Python如何给函数库增加日志功能
2020/08/04 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
数控技术专业推荐信
2013/11/01 职场文书
房产销售经理职责
2013/12/20 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
python中mongodb包操作数据库
2022/04/19 Python