jquery複習之路---常用外掛

外掛是以jquery的核心程式碼為基礎,編寫出符合一定規範的應用程式,並將程式進行打包,呼叫時,僅需要打包含該打包的js檔案即可。
外掛的呼叫:第一步在頁面中匯入包含外掛的js檔案(放在jq庫檔案之後);
自定義外掛
封裝jq外掛分三種：1，封裝方法外掛;2，封裝函式外掛； 3，選擇器外掛(基本不用);

一，封裝方法外掛，開發外掛的首選

封裝一個方法外掛實際是一個物件外掛, 該類外掛首先透過jQuery選擇器獲取物件，併為物件新增方法，然後將方法進行打包,封裝成一個外掛這種外掛極易調，也很方便的使用jQuery中的選擇器，因此成為開發外掛的首選；
$(selector).方法外掛();

二，封裝函式外掛

封裝函式外掛是一個類級別的外掛,該外掛的特點是能直接使用jQuery新增靜態方法，並可以將函式置於jQuery名稱空間中，如$.trim()和$.ajax()全域性性的函式都是以內部外掛的形式插入jQuery核心中;

三，外掛的封裝原則

jquery外掛命名必須以jQuery.[外掛名].js原則，以區分其他js檔案，
1：如果是物件級別的外掛，所有的方法必須依附於jquery.fn物件主體；
2：如果是類級別的外掛，所有的方法都應依附於jquery物件;
在外掛的內部，this代表的是jquery選擇器所獲取的物件，而非傳統意義上的物件的引用；在外掛內部的程式碼中可以使用this.each()遍歷所有的元素；無論是物件級別的外掛還是類級別的外掛結尾處都應以:分號結束，否則在檔案壓縮時有錯；在編寫jquery外掛程式碼中，使用jQuery不去使用$；
在編寫物件外掛時，使用jQuery.fn.extend()方法進行功能擴充套件；
在編寫類級別外掛，使用jQuery.extend()方法進行擴充套件；

四，物件級別外掛的開發
1, 功能描述：在列表

元素中,滑鼠在表項li元素移動時,可以自定義其獲取焦點（focus）時的背景顏色，即設定表項li元素選中時的背景顏色。
2,框架搭建：新建一個js檔案,命名為jquery.lifocuscolor.js;並在檔案中使用$.fn.extend()完成框架的搭建;

;(function(jQuery){
        jQuery.fn.extend({

          "liFocusColor":function(param_value){

              //各種預設屬性或者引數的設定
              var def_color = "#ccc";//預設獲取焦點的顏色;
              var lst_color = "#fff";//預設丟失焦點的顏色;
               //如果設定的顏色不為空,則使用設定顏色,否則使用預設顏色
              param_value = (param_value == undefined) ? def_color : param_value;
              //遍歷列表項
中的全部元素
              jQuery(this).find("li").each(function(){

                  //外掛實現的程式碼
                   jQuery(this).on("mouseover",function(){
                     //獲取滑鼠焦點事件
                        jQuery(this).css("background-color",param_color)
                           })

                  jQuery(this).on('mouseout',function(){
                      //失去滑鼠焦點事件
                         jQuery(this).css("background-color",lst_color) 
                         })

                    })
                  return jQuery(this);//返回jQuery物件,保持鏈式操作;
              }   
         })
})(jQuery);

外掛的呼叫

五，類級別外掛的開發
1，功能描述：新增兩個類級別的全域性函式,分別用於計算兩個數之和與兩個數只差,並將結果返回撥用的頁面中;
2，框架搭建：新建一個js檔案,命名為jquery.twoaddresult.js，並在檔案中使用$.extend()方法完成框架的搭建;

;(function(jQuery){
       $.extend({
      "twoAddResult":function(){
        "addNum":function(pram_value1,pram_value2){
         //外掛實現的程式碼
            //引數沒有就預設為0
            pram_value1 = (pram_value1==undefined)? 0 : pram_value1;
            pram_value2 = (pram_value2==undefined)? 0 : pram_value2;
            var result = parseFloat(pram_value1)+parseFloat(pram_value2);
            return result;
        },
        "subNum":function(pram_value1,pram_value2){
            //引數沒有就預設為0
            pram_value1 = (pram_value1==undefined)? 0 : pram_value1;
            pram_value2 = (pram_value2==undefined)? 0 : pram_value2;
            var result = parseFloat(pram_value1)-parseFloat(pram_value2);
            return result;
        }               
                    }
           })
})(jQuery);

外掛的呼叫