开发自己需要的jQuery插件，看个示例说明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
/*
jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，
另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
*/
//1.1定义一个全局函数
jQuery.foo = function() {
alert('添加一个新的全局函数');
}
//定义多个全局函数
jQuery.bar = function() {
alert('再增加一个全局函数');
}
//1.2使用extend定义全局函数
jQuery.extend({
foo1:function() {
alert('extend 定义全局函数1');
},
bar1:function() {
alert('extend 定义全局函数2');
}
});
//1.3 使用命名空间定义函数
jQuery.plugin = {
foo2:function() {
alert('使用namespace定义函数');
}
}

$(function(){
$.foo();
$.bar();
$.foo1();
$.bar1();
$.plugin.foo2();
});

/*
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式:
*/
//形式一
(function($){
$.fn.extend({
foo3:function() {
alert('对象级别插件extend方式1');
},
bar3:function() {
alert('对象级别插件extend方式2');
}
})
})(jQuery);

//形式二
(function($){
$.fn.foo4 = function() {
alert('对象级别插件fn方式');
}
})(jQuery);

//接收参数来控制插件的行为
(function($){
$.fn.bar4 = function(options) {
var defaults = {aaa:'1',bbb:'2'};
var opts = $.extend(defaults, options);
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
}
})(jQuery);

//提供公有方法访问插件的配置项值
(function($){
$.fn.foo5 = function(options) {    
var opts = $.extend({}, $.fn.foo5.defaults, options);
alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
}
$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

//提供公有方法来访问插件中其他的方法
(function($){
$.fn.bar5 = function(options) {
$.fn.bar5.alert(options);
}
$.fn.bar5.alert = function(params) {
alert(params);
}
})(jQuery);

$(function(){
$('#test').foo3();
$('#test').bar3();
$('#test').foo4();
$('#test').bar4();
$('#test').bar4({aaa:'3'});
$('#test').bar4({aaa:'3',bbb:'4'});
$('#test').foo5();
$('#test').foo5({aaa:'5',bbb:'6'});
$('#test').bar5('aaaa');
});
</script>
</head>

<body>
<div id="test"></div>
</body>
</html>

实现jQuery扩展总结的更多相关文章

  1. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  2. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  3. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  4. Javascript对象、Jquery扩展简单应用

    Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...

  5. Jquery扩展-手把手带你体验

    Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...

  6. jquery扩展 $.fn

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

  7. jQuery 扩展 【ajax实例】

    先前写工具类都是自定义类,直接prototype,jQuery扩展这一块儿,一直也没写过,刚好今天有空,写个试试. 已经有很多人对jQuery,jQuery.fn,jQuery.fn.extend详细 ...

  8. jQuery扩展与noConflict的用法-小示例

    有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能 index.html <!DOCTYPE html> <html> <head> & ...

  9. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

  10. jQuery之jQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

随机推荐

  1. CSS3前缀自动补全方案和插件

    第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...

  2. css写法优化

    写css关于id,class等的命名,文件的结构,共同模块的提取,代码的复用性,可读性,扩展性,维护性都要考虑,不然后期可以会需要花大力气去进行维护修改.考虑写出足够科学的css,需要考虑下面几个方面 ...

  3. 在ubuntu上搭建turnserver

    这边文章的目的:搭建turnserver,设定开机启动 1.下载turnserver的源码,最新的地址https://code.google.com/p/rfc5766-turn-server/ no ...

  4. c#之财务系统数据库

    财务收费系统补充数据库表 1.  学生表(F_Student) 名称 代码 数据类型 强制性的 ID s_ID int TRUE 学生姓名 Stu_name varchar (50) TRUE 身份证 ...

  5. JQuery-遮罩层

    HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...

  6. pip命令使用国内pypi镜像源加速在线安装

    参考:http://www.cnblogs.com/yudar/p/4444097.html 用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi. ...

  7. 如何实现百度外卖APP个人中心头像"浪"起来的动画效果

    作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯.某日瞬间发现百度外卖的APP波浪效果很是吸引人.相比较其他的外卖APP,颜值略高些.(淘宝也有波浪的效果),遂就思考如 ...

  8. Android中直播视频技术探究之---视频直播服务端环境搭建(Nginx+RTMP)

    一.前言 前面介绍了Android中视频直播中的一个重要类ByteBuffer,不了解的同学可以 点击查看 到这里开始,我们开始动手开发了,因为我们后续肯定是需要直播视频功能,然后把视频推流到服务端, ...

  9. VC++ 工程添加 Unicode Debug和Unicode Release编译支持

    转载:http://blog.csdn.net/djhdu/article/details/171766 转载:http://blog.163.com/long_lh/blog/static/2769 ...

  10. HDU 5688 Problem D map

    Problem D Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...