那麼首先我們來簡單的看一下最正統的 jQuery 插件定義方式：
代碼如下:
(function ($) {
$.fn.插件名 = function (settings) {
//默認參數
var defaultSettings = {
} /* 合並默認參數和用戶自定義參數 */
settings = $.extend(defaultSettings, settings);
return this.each(function () { //代碼 }); //插件在元素內多次出現
} })(jQuery);
先來看模板中的第一行代碼（當然我們要把這一行代碼的後半部分給揪出來一起看，不然第一行就完全無意義了）：
代碼如下:
(function ($) {
})(jQuery);
這行代碼其實是用於創建一個匿名函數。如果你對匿名函數和閉包不了解，將會對這種代碼非常疑惑，那麼強烈建議您閱讀【詳談JavaScript 匿名函數及閉包】這篇文章。
jQuery 的繼承方法 $.extend —— $.extend 在jQuery 插件開發中有個很重要的作用，就是用於合並參數。
代碼如下:
$.fn.tip = function (settings) {
var defaultSettings = {
//顏色
color: 'yellow',
//延遲
timeout: 200 }
/* 合並默認參數和用戶自定義參數 */
settings = $.extend(defaultSettings, settings);
alert(settings.input); <br>}
jQuery 插件定義第二種方式：
代碼如下:
(function ($) {
//插件定義--更換名字
$.fn.tabpanel = function (method) {
var methods = $.fn.tabpanel.methods;
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
}
}
//支持的方法
$.fn.tabpanel.methods =
{
//初始化
init: function (p_options) {
tabpanelBind(p_options, this);
},
add: function (p_options) {
addTab(p_options, this);
tabpanelBind(p_options, this);
// debugger
} }
function add(p_options) {
var _defaults = {
id: ""
}
<br> //內部實現略.........<br> return _index;
}
<br>})(jQuery);<br><br>調用 $("#team").tabpanel('add',"");
好了，上面介紹的這2種開發方式都是最常用的，小伙伴們先好好學習下吧，後續我們再介紹的更深入些