zoukankan      html  css  js  c++  java
  • 实现jQuery扩展总结

    开发自己需要的jQuery插件,看个示例说明

    jQuery插件的开发包括两种:

    1. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,
    2. 另一种是对象级别的插件开发,即给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');
    });
  • 相关阅读:
    鼠标滑动显示层
    软件过程+改进 +UML
    接口和抽象类的区别
    SQL SERVER – Difference Between EXEC and EXECUTE vs EXEC() – Use EXEC/EXECUTE for SP always
    XDocument.Parse Method (String)
    Robocopy use case
    Two Solutions to fix issue: ORDER BY items must appear in the select list if the statement contains a UNION, ...
    [转载]:SQL Server 连接字符串和身份验证
    Insert Data From One Table to Another
    volatile (C# Reference)
  • 原文地址:https://www.cnblogs.com/178mz/p/5695708.html
Copyright © 2011-2022 走看看