深入學習jQuery自定義插件
原文地址： jQuery自定義插件學習
1、定義插件的方法
對象級別的插件擴展 ，即為jQuery類的實例增加方法，
調用：$(選擇器).函數名(參數); $(‘#id’).myPlugin(options);
定義的方式：
$.fn.extend({
"函數名":function(自定義參數){
//這里寫插件代碼
}
});
//或者是
$.fn.函數名 = function(options){
//這里寫插件代碼
}類級別的方法 ，就是擴展jQuery類本身的方法，為它增加新的方法，
調用：$.函數名(arguments); $.add(3,4);
$.extend({
"函數名":function(自定義參數){
//這里寫插件代碼
}
});
//或者是
$.函數名=function(自定義參數){
//這里寫插件代碼
}你會發現他們的區別僅僅是少了一個fn而已，而jQuery.fn = jQuery.prototype，Javascript中對象的prototype屬性的解釋是：返回對象類型原型的引用。
如果A.prototype = new B();就相當于A.prototype是B的實例，A可以使用B中的所有方法。
那么在我們這里，不就正是擴展了對象的方法么，使對象能夠使用我們所定義的方法。
關于prototype，可以參考這篇文章：JS中的prototype
那么extend又是什么意思呢？在我們這里extend就只有一個參數，
"函數名:function(自定義參數){
//這里寫插件代碼
}此時，我們的這個函數就被合并到jquery的全局對象中去，就相當于擴展了jQuery類的方法。
因為，extend是有多個參數的，extend的所用就是合并參數到一個新的參數中，例如
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
//結果就是
result={name:"Jerry",age:21,sex:"Boy"}關于extend可以參考這篇文章： jQuery.extend 函數詳解
以上還參考： jquery的extend和fn.extend
2、實例分析，定義一個帶參數的插件。
一般我們都會在很多地方看到，不要js污染全局環境，其實也對，要不然你定義一個變量，在你引用別人的插件中也定義了，那就沖突了，這就涉及到了js作用域的問題，我們得“封裝”作用域，于是我們知道一個函數的作用域僅僅在一個函數中，但函數執行完畢，變量也就會被注銷。
于是這里我們得用到立即執行函數，用一個函數將我們定義的插件代碼包裹起來，這樣就形成了一個局部的作用域，從而不會影響到全局的環境，關于立即執行函數，可以參考這篇： js中(function(){…})()立即執行函數寫法理解
那么，我們的寫法將是：
(function($){
$.fn.extend({
函數 : function(options){
}
});
})(jQuery);我想自定義一個彈出層插件，可以設置背景顏色，寬和高，不設置即為默認的。
首先，在html元素中，我想設置按鈕點擊，
<a id="dialog">點擊彈出層</a> <div class="dialog"></div>
其實這里的div.dialog是可以動態創建的，在這里就沒有。動態創建可參考： jQuery – 添加元素
$('body').append($('<div></div>').addClass('dialog'));//后面有疑問css樣式當然最初是隱藏的
.dialog{
width:300px;
height: 200px;
background:green;
position: absolute;
left:50%;top:30%;
margin-left: -150px;
display: none;
}最后就是定義插件的js
(function($){
$.fn.extend({
dialog : function(options){
//$('body').append($('<div></div>').addClass('dialog'));
//此處有疑問，我如果在這里動態創建元素后，為什么要點擊2次才能看到效果？不理解，求告知。
var setting = $.extend({}, {background:'green', width:300, height:200}, options);
return this.css({'width':setting.width, 'height':setting.height, 'background':setting.background}).show('slow');
}
});
})(jQuery);這里的return this的作用是使我們定義的插件方法可以鏈式調用，也就是維護鏈接性。
插件內部的this指向的是jQuery對象，而非普通的DOM對象。因為DOM對象是沒有css()方法的，這是jQuery對象的方法，那么，jQuery對象的寫法不應該是$(this)嗎？在這里我們把this換成$(this)一樣可以用，關于$(this)和this的區別，可以參考： jQuery中this與$(this)的區別 ，但我還是不清楚這里用this和$(this)為什么是一樣的？
最后調用初始化就可以了。
$('#dialog').click(function(){
$('.dialog').dialog({
background:'red',
width:500,
height:100
});
});效果可以查看代碼演示，上面的疑問希望給出解釋。
以上還參考： 創建一個自定義 jQuery 插件