jquery 外掛學習（五）_jquery

這節封裝插件了，進度怎麼樣呢？

一般對外發布的插件都應該進行封裝，封裝的插件也應該符合規範，只有這樣寫的插件才具有推廣價值，並得到其他用戶的喜愛。

首先第一步，是定義一個獨立域，程式碼如下圖所示。

複製程式碼 程式碼如下:

(function($){


(function($){

{
{定義外掛程式碼
})(jQuery) //封裝外掛程式

確定建立外掛類型，選擇建立方式，例如，建立一個設定元素字體顏色的插件，則應該建立jquery物件方法，考慮到jquery提供了插件擴充方法extend()，呼叫該方法會更為規範。

複製程式碼

程式碼如下:


(function($){

(function($){
{
{定義外掛程式碼

$.extend($.fn,{ //jquery物件擴充方法}) })(jQuery) //封裝外掛程式 一般插件都會接受參數，用來控制插件的行為，例如，對於設定顏色的插件，應該允許使用者設定字體顏色，同時，應該考慮如果使用者沒有設定顏色，則應該保持預設色進行設定。

複製程式碼


程式碼如下:


(function($){

(function($){
{

{定義外掛程式碼$.extend($.fn,{ color : function(options){ var options = $.extend({bcolor :"white",fcolor:"black"},options ); // } })

})(jQuery) //封裝插件

最後完善插件




複製程式碼


程式碼如下:

;(function($){
$.extend($.fn,{
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);

//函數體return this.each(function(){ $(this).css("color",options.bcolor); $(this).css("background",options.fcolor); }); }// color==end })

})(jQuery);

調用看看

複製代碼 程式碼如下: $("h1").color({bcolor : "#ccc",fcolor:"#eee"}); $(' a').color("#fff");