jQuery插件制作的实例教程

作者：轩枫字体：[增加减小] 来源：互联网

轩枫通过本文主要向大家介绍了jQuery,插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、jQuery插件的类型

1. jQuery方法

很大一部分的jQuery插件都是这种类型，由于此类插件是将对象方法封装起来，在jQuery选择器获取jQuery对象过程中进行操作，从而发挥jQuery强大的选择器优势。

2. 全局函数法

可以把自定义的功能函数独立附加到jQuery命名空间下，从而作为jQuery作用域下的一个公共函数使用。
但全局函数没有被绑定到jQuery对象上，故不能在选择器获取的jQuery对象上调用。需要通过jQuery.fn()或$.fn()方式进行引用。

3. 选择器法

如果觉得jQuery提供的选择器不够用或不方便的话，可以考虑自定义选择器。

二、jQuery插件的机制

1. jQuery.extend()方法

这种方法能够创建全局函数或选择器。

所谓全局函数，就是jQuery对象的方法，实际上就是位于jQuery命名空间内部的函数，有人把这类函数称为实用工具函数，这些函数都有一个共同特征，就是不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作，如jQuery的each()函数和noConflict()函数。

例如，在jQuery命名空间上创建两个公共函数：

jQuery.extend({ 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
}) 
$(function(){ 
$("input").click(function(){ 
var a = prompt("请输入一个数："); 
var b = prompt("再输入一个数："); 
var c = jQuery.min(a,b); 
var d = jQuery.max(a,b); 
alert("最大值是：" + d + "\n最小值是：" + c); 
}); 
})

<input type="button" value="jQuery扩展测试" />

jQuery.extend({ 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
}) 
$(function(){ 
$("input").click(function(){ 
var a = prompt("请输入一个数："); 
var b = prompt("再输入一个数："); 
var c = jQuery.min(a,b); 
var d = jQuery.max(a,b); 
alert("最大值是：" + d + "\n最小值是：" + c); 
}); 
})

<input type="button" value="jQuery扩展测试" />

jQuery.extend()方法除了可以创建插件外，还可以用来扩展jQuery对象。

例如，调用jQuery.extend()方法把对象a和对象b合并为一个新的对象，并返回合并对象将其赋值给变量c：

var a = {name : "aaa",pass : 777}; 
var b = {name : "bbb",pass : 888,age : 9}; 
var c = jQuery.extend(a,b); 
$(function(){ 
for(var name in c){ 
$("div").html($("div").html() + "<br />"+ name + ":" + c[name]); 
} 
})

如果要向jQuery命名空间上添加一个函数，只需要将这个新函数制定为jQuery对象的一个属性即可。其中jQuery对象名也可以简写为$，jQuery.smalluv==$.smalluv。

例如，创建jQuery全局函数：

jQuery.smalluv = { 
min : function(a,b){ 
return a<b?a:b; 
}, 
max : function(a,b){ 
return a<b?b:a; 
} 
} 
$(function(){ 
$("input").click(function(){ 
var a = prompt("请输入一个数:"); 
var b = prompt("再输入一个数:"); 
var c = jQuery.smalluv.min(a,b); 
var d = jQuery.smalluv.max(a,b); 
alert("最大值是：" + d + "\n最小值是：" + c); 
}); 
})

2. jQuery.fn.extend()方法

这种方法能够创建jQuery对象方法。

举一个最简单的jQuery对象方法例子：

jQuery.fn.test = function(){ 
alert("jQuery对象方法"); 
} 
$(function(){ 
$("div").click(function(){ 
$(this).test(); 
}); 
})

三、初步总结

在jQuery匿名函数中,采用jQuery.extend();方法创建jQuery插件
在jQuery匿名函数中,采用对象.属性=函数的方式创建jQuery插件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>最简单的jquery插件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../res/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
      (function($) {
        jQuery.extend({//写法1
          a: function(h){
            $("#ad").html(h);
          },
          b:function(h){
            alert(h);
          }
        })
      })(jQuery);
 
      (function($) {//写法2
        jQuery.a=function(h){
          $("#ad").html(h);
        }
        jQuery.b=function(h){
          alert(h);
        }
      })(jQuery);
 
      $(document).ready(function(){
        $.a("abc");
        $.b("xyz");
      });
 
    </script>
 
  </head>
  <body>
    <h3>最简单的jQuery插件</h3>
    <div id="ad"></div>
  </body>
</html>

四、编写实例

写法一

插件主体：

(function($, window){
  // 初始态定义
  var _oDialogCollections = {};
 
  // 插件定义
  $.fn.MNDialog = function (_aoConfig) {
    // 默认参数，可被重写
    var defaults = {
      // string
      sId : "",
      // num
      nWidth : 400,
      // bollean
      bDisplayHeader : true,
      // object
      oContentHtml : "",
      // function
      fCloseCallback : null
    };
 
    var _oSelf = this,
      $this = $(this);
 
    // 插件配置
    this.oConfig = $.extend(defaults, _aoConfig);
 
    // 初始化函数
    var _init = function () {
      if (_oDialogCollections) {
        // 对于已初始化的处理
        // 如果此时已经存在弹框，则remove掉再添加新的弹框
      }
      // 初始化弹出框数据
      _initData();
      // 事件绑定
      _loadEvent();
      // 加载内容
      _loadContent();      
    }
    // 私有函数
    var _initData = function () {};
    var _loadEvent = function () {};
    var _loadContent = function () {
      // 内容（分字符和函数两种，字符为静态模板，函数为异步请求后组装的模板，会延迟，所以特殊处理）
      if($.isFunction(_oSelf.oConfig.oContentHtml)) {
        _oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
          // 便于传带参函数进来并且执行
          _oSelf.html(oCallbackHtml);
          // 有回调函数则执行
          _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
        });
      } else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
        _oSelf.html(_oSelf.oConfig.oContentHtml);
        _oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
      } else {
        console.log("弹出框的内容格式不对，应为function或者string。");
      }
    };
 
    // 内部使用参数
    var _oEventAlias = {
      click     : 'D_ck',
      dblclick   : 'D_dbl'
    };
 
    // 提供外部函数
    this.close = function () {
      _close();
    }    
 
    // 启动插件
    _init();
 
    // 链式调用
    return this;    
  };
  // 插件结束
})(jQuery, window);

调用

var MNDialog = $("#header").MNDialog({
  sId : "#footer",    //覆盖默认值
  fCloseCallback : dialog,//回调函数
  oContentHtml : function(_aoCallback){
      _aoCallback(_oEditGrpDlgView.el);
    }
  }
});
// 调用提供的函数
MNDialog.close;
function dialog(){
 
}

点评

1. 自调用匿名函数

(function($, window) {
 // jquery code
})(jQuery, window);

用处：通过定义一个匿名函数，创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

2. 匿名函数为什么要传入window

通过传入window变量，使得window由全局变量变为局部变量，当在jQuery代码块中访问window时，不需要将作用域链回退到顶层作用域，这样可以更快的访问window；这还不是关键所在，更重要的是，将window作为参数传入，可以在压缩代码时进行优化，看看jque

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

jQuery插件制作的实例教程

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容