一、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="https://www.jb51.net/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></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);
调用