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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 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页面中文乱码分析
2013/10/29 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
php实现Session存储到Redis
2015/11/11 PHP
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
JS错误处理与调试操作实例分析
2020/04/13 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
使用python实现baidu hi自动登录的代码
2013/02/10 Python
django之常用命令详解
2016/06/30 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
初中生操行评语大全
2014/04/24 职场文书
政治表现评语
2014/05/04 职场文书
空气的环保标语
2014/06/12 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
公司管理制度范本
2015/08/03 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL