/**
 * Created by peng on 2016/12/8.
 */
jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options,function(){
    //return settings;
});
jQuery.extend({
    foo: function() {
        alert('类级别使用extend');
    },
    bar: function(param) {
        alert('类级别使用extend');
    }
});

jQuery.foo = {
    ajax:function() {
        alert('类级别使用命名空间');
    },
    bar:function(param) {
        alert('类级别使用命名空间'+param);
    }
};

$.fn.extend({
    foo:function(){
        alert('对象级别使用extend');
    },
    bar:function(){
        alert('对象级别使用extend');
    }
})

$.fn.foo = {
    fun1:function(){
        alert('对象级别使用命名空间');
    },
    fun2:function(){
        alert('对象级别使用命名空间');
    }
};

jQuery.fn.name1 = {
    fun:function() {
        alert('name1的fun');
    },
    bar:function(param) {
        alert('类级别使用命名空间'+param);
    }
};

jQuery.fn.extend({
    fun:function() {
        alert('name2的fun');
    },
    bar:function(param) {
        alert('类级别使用命名空间'+param);
    }
})

var n={};
n.f={};
n.f.a={};
n.f.a.b={};
n.f.a.b.foo = function(s){alert("哈哈 多么奇妙"+s);}

// plugin definition 定义插件

$.fn.hilight = function(options) { var defaults = { foreground: 'red', background: 'yellow' };

var opts = $.extend(defaults, options);
    return opts;
};

(function ($) {
    //step03-a 插件的默认值属性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的扩展方法名称
    $.fn.easySlider = function (options) {
        //step03-b 合并用户自定义属性，默认属性
        var options = $.extend(defaults, options);

return  defaults;
    }
})(jQuery);

以下是测试所用页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script src="js/chajian1.js"></script>
</head>
<body>
<div id="content">

</div>
<div id="myDiv" style="height:20px;width:30px;border:1px solid ">

</div>
<script type="text/javascript">
    //jQuery.min(2,3); //  2
    //jQuery.max(4,5); //  5
    //console.log(jQuery.min(2,3));
   // console.log(jQuery.max(4,5));
    //$("#content").html(jQuery.min(2,3)+jQuery.max(4,5));
   // console.log(settings);
   //$.foo.bar();
   // jQuery.myPlugin.bar("1");
    //$.foo("ff");
  // n.f.a.b.foo("zhazha ");
    //$("div").fun();

// $.name1.fun();
   // $.name2.fun();
   // $("#content").name1.fun();
   // $("#content").name2.fun();
    //$('#myDiv').hilight({foreground: 'blue' });
    //console.log($('#myDiv').hilight({foreground: 'blue' }));
   // var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
  //  var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

// var a = $.extend(obj01, obj02);
   // var b = $.extend(true, obj01, obj02);
   // var c = $.extend({}, obj01, obj02);
  //  var d = $.extend(true,{}, obj01, obj02);

// console.log(a);
   // console.log(b);
   // console.log(c);
   // console.log(d);
    console.log($("<div id='notheone'/>").easySlider( {prevId: 'aa',prevText:'bb'}));
</script>
</body>
</html>

jquery插件的几种写法的更多相关文章

  1. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  2. jquery插件的两种形式

    这里总结一下jquery插件的两种形式,一种是通过字面量的形式组织代码,另一种是通过构造函数的方式.下面就两种形式来分析俩个例子. 例子1: ;(function ($,window,document ...

  3. 【jQuery】学习jQuery插件的使用与写法（表单验证插件-validation）

    最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示 ...

  4. jQuery插件的使用和写法

    插件(plugin)也称为扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序. jQuery的易扩展性,吸引了来自全球的开发者来共同编写jQuery的插件. jQuery表单验 ...

  5. jQuery插件的2种类型

    1.封装方法插件  封装方法插件在本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用 ...

  6. jquery插件的2种扩展开发(jQuery.extend和jQuery.fn.extend的区别)

    1.类级别 jQuery.extend(object) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQu ...

  7. （翻译）编写属于你的jQuery插件

    Writing Your Own jQuery Plugins 原文地址:http://blog.teamtreehouse.com/writing-your-own-jquery-plugins j ...

  8. 自己动手Jquery插件

    最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...

  9. 用实例一步步教你写Jquery插件

    最近Web应用程序中越来越多地用到 了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时 ...

随机推荐

  1. 《DSP using MATLAB》Problem 5.4

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  2. Python--subprocess系统命令模块-深入

    当我们运行python的时候,我们都是在创建并运行一个进程.正如我们在Linux进程基础中介绍的那样,一个进程可以fork一个子进程,并让这个子进程exec另外一个程序.在Python中,我们通过标准 ...

  3. C++问题汇总

    1.C++中类相互调用注意事项 (1)若A类中的方法需要调用B类中的函数,那么A类的源文件(或头文件)中需要包含B类的classs声明头文件.若使用了命名空间,还需要在B类的源文件(或头文件)中使用 ...

  4. WebSocket-Over-HTTP Protocol

    转自:https://pushpin.org/docs/protocols/websocket-over-http/ WebSocket-Over-HTTP Protocol The WebSocke ...

  5. 我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain 用于 热更新

    大家好,  我发起了一个 .Net Core 平台上的 开源项目 ShadowDomain  用于 热更新 . 简单的说, 原理就是 类似 Asp.net 那样 让 当前 WebApp 运行在一个 A ...

  6. [转]DB2中需要REORG操作的几种情况

    问题: 在DB2数据库中,修改完表的结构时,是否需要对表做一个reorg操作才能使表的状态恢复正常? 答:有以下4种操作,需要对表做reorg操作 1. SET DATA TYPE altered-d ...

  7. 在CentOS6.8系统上安装MySQL5.7(转)

    mysql-57">如何在CentOS 6.8系统上安装MySQL 5.7? 一.检查系统上是否已经安装MySQL 命令: ? 1 2 3 4 5 [root@localhost ~] ...

  8. VMware虚拟机安装红帽系统无法上网解决办法(转)

    原文地址:https://www.aliyun.com/jiaocheng/146779.html 1.最近在vmware安装redhat 7.4虚拟机后无法上网,首先按照下文配置,能ping同宿主机 ...

  9. Flume 拦截器(interceptor)详解

    flume 拦截器(interceptor)1.flume拦截器介绍拦截器是简单的插件式组件,设置在source和channel之间.source接收到的事件event,在写入channel之前,拦截 ...

  10. 基于zookeeper的activemq的主从集群配置

    项目,要用到消息队列,这里采用activemq,相对使用简单点.这里重点是环境部署. 0. 服务器环境 RedHat710.90.7.210.90.7.1010.90.2.102 1. 下载安装zoo ...