如何建立一個jQuery外掛
為什麼要建立jQuery外掛 ？ 因為這樣程式碼可以複用。
我們有這樣一個頁面，頁面上面有如下的文字(看原始碼)，我們想要的效果是，當滑鼠移到連結的時候，用一個浮動的div來顯示a標籤的title內容.
這是通過js來完成的。假設有一個方法tooltip(), 你只需要呼叫這個方法就能達成你的願望，就像這樣：
 
     $(`a.tooltip`).tooltip({  
         rounded: true  
     });  
 
假設我們把外掛命名為tooltip，則需要定義一個jQuery.tooltip.js檔案。這樣命名只是為了說明這是jQuery的外掛，實際上你可以隨便命名這個檔名。下面來開始寫我們的外掛：
(function($){ 
  #   …code 
})(jQuery);
外掛的程式碼必須包含在這個格式裡。這裡要注意，要確保你沒有使用別的js庫，否則這個美元符$，會發生衝突，如果要避免產生這種衝突，你最好在外掛裡都使用jQuery字元來代替美元符。
我們首先來定義外掛函式：
$.fn.tooltip = function(options) {
     …
}
然後設定預設的引數：
   var  
      defaults = { 
          background : `#e3e3e3`, 
          color : `black`, 
          rounded: false 
     },
然後再用setting變數來接收使用者自定義的引數，使用extend方法來merge這些引數。
settings = $.extend({}, defaults, options);
現在要開始寫方法了，使用者如果使用這個外掛的時候，傳入的jquery dom物件可能不只是一個元素，我們需要給每個class為tooltip的a標籤都繫結好這個事件，那麼就需要迭代了，這裡jquery提供了each方法：
    this.each(function() { 
          var $this = $(this); 
          var title = this.title; 
          … …
    }
這裡為什麼要用$this呢？ 這是為了提醒自己，正在和jQuery物件打交道。
然後寫滑鼠事件等等，來看最後的程式碼：
(function($){ 
   $.fn.tooltip = function(options) { 
        
       var 
         defaults = { 
           background: `#e3e3e3`, 
           color: `black`, 
           rounded: false 
         }, 
           settings = $.extend({}, defaults, options); 
            
           this.each(function() { 
             var $this = $(this); 
             var title = this.title; 
              
             if($this.is(`a`) && $this.attr(`title`) != “) { 
                 this.title = “; 
                 $this.hover(function(e) { 
                     // mouse over 
                     $(`
`) 
                       .appendTo(`body`) 
                       .text(title) 
                       .hide() 
                       .css({ 
                         backgroundColor: settings.background, 
                         color: settings.color, 
                         top: e.pageY + 10, 
                         left: e.pageX + 20 
                       }) 
                       .fadeIn(350); 
                        
                   if(settings.rounded) { 
                     $(`#tooltip`).addClass(`rounded`); 
                   } 
                 }, function() { 
                     // mouse out 
                     $(`#tooltip`).remove(); 
                 });  
             } 
              
             $this.mousemove(function(e) { 
                 $(`#tooltip`).css({ 
                     top: e.pageY + 10, 
                     left: e.pageX + 20 
                  }); 
             }); 
           }); 
           // returns the jQuery object to allow for chainability. 
           return this; 
     } 
 })(jQuery); 
總結：
1. 這裡有個小技巧，假如要定義多個變數：
var a = {};
var b = {};
var c = {};
可以這麼寫：
var
a = {},
b = {},
c = {};
2.外掛程式碼裡，迴圈內的this, 迴圈外的this，迴圈內的$(this)的關係， 實際上是jQuery物件和dom物件的關係。
頁面上呼叫外掛方法，外掛方法內部的each外的this，則是jQuery物件，這個物件是個集合物件，也就是$(`a.tooltip`)這個物件，頁面上共有2個class為tooltip的a標籤。
jquery物件的$方法，返回的是jquery集合物件，裡面的元素，如果你用get方法去呼叫得到的是dom，你用eq方法呼叫得到的是jquery物件，比如：
$(`a`).eq(0)得到的是jquery物件
$(`a`).get(0)得到的是dom物件，
直接$(`a`)[0]得到的是dom物件，
而jquery的each方法，我認為是迭代的是dom物件，而不是jquery物件，所以在each裡面this是dom物件，而需要$(this)來得到jquery物件來進行操作 。把這個關係搞清楚就行了。