小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

使用兩種方式自定義jQuery插件

 程序猿130 2018-01-13
自定義jquery插件可以在函數(shù)級別定義也可在對象級別定義，而每種級別的插件都可以傳參和不傳參。
1.添加jQuery對象級的插件，是給jQuery對象添加方法
寫法：
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         "函數(shù)名":function(自定義參數(shù)){  
  4.             //這里寫插件代碼  
  5.         }  
  6.     });  
  7. })(jQuery);  
  8. 或者  
  9. ;(function($){  
  10.     $.fn.函數(shù)名=function(自定義參數(shù)){  
  11.         //這里寫插件代碼  
  12.     }  
  13. })(jQuery);  
調(diào)用方法：$("#id").函數(shù)名(參數(shù));

2.jQuery類級別的插件，相當于添加靜態(tài)方法
  1. ;(function($){  
  2.     $.extend({  
  3.         "函數(shù)名":function(自定義參數(shù)){  
  4.             //這里寫插件代碼  
  5.         }  
  6.     });  
  7. })(jQuery);  
  8. 或者  
  9. ;(function($){  
  10.     $.函數(shù)名=function(自定義參數(shù)){  
  11.         //這里寫插件代碼  
  12.     }  
  13. })(jQuery);  
調(diào)用方法：$.函數(shù)名(參數(shù));


jquery插件的種類：
  1.對象級別的插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()
  2.一種是類級別的插件開發(fā)，即給jQuery添加新的全局函數(shù)，相當于給jQuery類本身添加方法，jQuery的全局函數(shù)就是屬于jQuery命        名空間的函數(shù)，封裝全局函數(shù)的插件
  3.選擇器插件
jQuery插件機制
  jQuery為開發(fā)插件提拱了兩個方法，分別是：
     jQuery.fn.extend(object); 給jQuery對象添加方法。
     jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法，可以理解為添加靜態(tài)方法。
     這兩個方法都接受一個參數(shù)，類型為Object，Object對應(yīng)的"名/值對"分別代表"函數(shù)或方法體/函數(shù)主體"。
 fn 是什么東西呢？
 查看jQuery代碼，就不難發(fā)現(xiàn)：
  1. <span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; </span>  

 原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然javascript沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如  我們用 語句　$("#btn1") 會生成一個 jQuery類的實例。
 jQuery.fn.extend(object)， 對jQuery.prototype進行擴展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實例可以使用這個“成員函數(shù)”。即：$("#id").object();

 jQuery.extend()方法除了可以擴展jQuery對象外，還可以擴展已有的Object對象，經(jīng)常被用于設(shè)置插件方法的一系列默認參數(shù)，可以很方便的用傳入的參數(shù)來覆蓋默認值
 jQuery.extend(object1,object2)object1默認參數(shù)值，object2傳入的參數(shù)值；

  1. <span style="font-size:12px;">var settions ={validate:false,limit:5,name="foo"};  
  2. var options ={validate:true,name="bar"};  
  3. var newOptions=jQuery.extend(settings,options);  
  4. 結(jié)果為：</span>  
  1. <span style="font-size:12px;">newOptions = {validate:true,limit:5,name="bar"};  
  2.   
  3. function foo(options){  
  4.     options = jQuery.extend({  
  5.             name="bar",  
  6.             length:5,  
  7.                 dataType="xml" /*默認參數(shù)*/  
  8.         },options    /*options 為傳遞的參數(shù)*/  
  9.     );  
  10. }</span>  

 如果用戶調(diào)用foo()方法的時候，在傳遞的參數(shù)options對象中設(shè)置了相應(yīng)的值，
 那么就使用設(shè)置的值，否則使用默認值，調(diào)用方法：
  1. <span style="font-size:12px;">foo({name:"a",length:4,dataType:"json"});  
  2. foo({name:"a"});  
  3. foo();</span>  

編寫jQuery插件

 封裝jQuery對你方法的插件，首先需要在javaScript文件里搭好框架，代碼如下：
  1. <span style="font-size:12px;">;(function($){  
  2.     //這里寫插件代碼  
  3. })(jQuery);</span>  


 1.對象級別的插件開發(fā)，即給jQuery對象添加方法，封裝對象方法的插件，如:parent()、appendTo()

  由于是對jQuery對象的方法擴展，因此采用擴展第1類（封裝對象方法）插件的方法jQuery.fn.extend()來編寫
  1. <span style="font-size:12px;">;(function($){  
  2.  $.fn.extend({  
  3.   "color":function(value){  
  4.   //這里寫插件代碼  
  5.   }  
  6.  });  
  7. })(jQuery);</span>  
  或者
  1. <span style="font-size:12px;">;(function($){  
  2.  $.fn.color=function(value){  
  3.    //這里寫插件代碼  
  4.  }  
  5. })(jQuery);</span>  

  這里的方法提供一個參數(shù)value,如果調(diào)用方法時傳入value，那么就用這個值來設(shè)置字體顏色,否則就是獲取匹配無此的字體顏色的值
  1. <span style="font-size:12px;">;(function($){  
  2.     $.fn.extend({  
  3.         "color":function(value){  
  4.             return this.css("color",value);  
  5.         }  
  6.     });  
  7. })(jQuery);</span>  

  插件內(nèi)部的this指向的是jQuery對象，而非普通的DOM對象。接下來注意的是，插件如果不需要返回字符串之類的特定值，應(yīng)當使其具有可鏈接性。
  為此，直接返回這個this這個對象，由于css()方法也會返回調(diào)用它的對象，即此外的this，因此可以將代碼寫成上面的形式;

  調(diào)用時可直接寫成：$("div").color("red");

  另外如果要定義一組插件，可以使用如下所示寫法：
  1. <span style="font-size:12px;">;(function($){  
  2.     $.fn.extend({  
  3.         "color":function(value){  
  4.             //這里寫插件代碼  
  5.         },  
  6.         "border":function(value){  
  7.             //這里寫插件代碼  
  8.         },  
  9.         "background":function(value){  
  10.             //這里寫插件代碼  
  11.         }  
  12.     });  
  13. })(jQuery);</span>  

2.封裝全局函數(shù)的插件

 這類插件是在jQuery命名空間內(nèi)部添加一個函數(shù)。這類插件很簡單，只是普通的函數(shù)，沒有特別需要注意的地方。

 例如新增兩個函數(shù)，用于去除左側(cè)和右側(cè)的空格。

 首先構(gòu)建一個Object對象，把函數(shù)名和函數(shù)都放進去，其中的名/值對分別為函數(shù)名和函數(shù)主體
 然后利用jQuery.extend()方法直接對jQuery對象進行擴展

 jQuery代碼如下：
  1. <span style="font-size:12px;">;(function($){  
  2.     $.extend({  
  3.         ltrim:function(text){  
  4.             return (text||"").replace(/^\s+g,"");  
  5.         },  
  6.         rtrim:function(text){  
  7.             return (text||"").replace(/\s+$/g,"");  
  8.         }  
  9.     });  
  10. })(jQuery);  
  11. 或者  
  12. ;(function($){  
  13.     $.ltrim=function(text){  
  14.         return (text||"").replace(/^\s+g,"");  
  15.     },  
  16.     $.rtrim=function(text){  
  17.         return (text||"").replace(/\s+$/g,"");  
  18.     }  
  19.       
  20. })(jQuery);</span>  

 *(text||"")部分是用于防止傳遞進來的text這個字符串變量處于未定義的特殊狀態(tài)，如果text是undeined，則返回字符串""，否則返回字符串text。
  這個處理是為了保證接下來的字符串替換方法replace()方法不會出錯
 *運用了正則表達式替換首末的空格

 調(diào)用函數(shù)：
  1. <span style="font-size:12px;">$("trimTest").val(  
  2.     jQuery.trim(" test ")+"\n"+  
  3.     jQuery.ltrim(" test ")+"\n"+  
  4.     jQuery.rtrim(" test ")  
  5. );</span>  

 運行代碼后，文本框中第一行字符串左右兩側(cè)的空格都被刪除。
 第二行的字符串只有左側(cè)的空格被刪除。
 第三行的字符串只有右側(cè)的空格被刪除。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多