jQuery自定義插件

jQuery編寫插件的兩種方法

1.添加jQuery對象級的插件，是給jQuery類添加方法

寫法：

;(function($){
	$.fn.extend({
		"函數名":function(自定義參數){
			//這裏寫插件代碼
		}
	});
})(jQuery);

或者

;(function($){
	$.fn.函數名=function(自定義參數){
		//這裏寫插件代碼
	}
})(jQuery);

　　

調用方法：$("#id").函數名(參數);

jquery插件的種類：

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

 2.一種是類級別的插件開發，即給jQuery添加新的全局函數，至關於給jQuery類自己添加方法，jQuery的全局函數就是屬於jQuery命        名空間的函數，封裝全局函數的插件

 3.選擇器插件

　　

jQuery插件機制

  jQuery爲開發插件提拱了兩個方法，分別是：

  jQuery.fn.extend(object); 給jQuery對象添加方法。

  jQuery.extend(object); 爲擴展jQuery類自己.爲類添加新的方法，能夠理解爲添加靜態方法。

  這兩個方法都接受一個參數，類型爲Object，Object對應的"名/值對"分別表明"函數或方法體/函數主體"。

 fn 是什麼東西呢？

查看jQuery代碼，就不難發現：

jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; 

 原來 jQuery.fn = jQuery.prototype.對prototype確定不會陌生啦。雖然javascript沒有明確的類的概念，可是用類來理解它，會更方便。jQuery即是一個封裝得很是好的類，好比  咱們用 語句　$("#btn1") 會生成一個 jQuery類的實例。

 jQuery.fn.extend(object)， 對jQuery.prototype進行擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。即：$("#id").object();

 

 jQuery.extend()方法除了能夠擴展jQuery對象外，還能夠擴展已有的Object對象，常常被用於設置插件方法的一系列默認參數，能夠很方便的用傳入的參數來覆蓋默認值

 jQuery.extend(object1,object2)object1默認參數值，object2傳入的參數值；詳細說明，請點擊這裏

var settions ={validate:false,limit:5,name="foo"};
var options ={validate:true,name="bar"};
var newOptions=jQuery.extend(settings,options);

　　結果爲：

newOptions = {validate:true,limit:5,name="bar"};

function foo(options){
	options = jQuery.extend({
			name="bar",
			length:5,
		        dataType="xml" /*默認參數*/
		},options	 /*options 爲傳遞的參數*/
	);
}

若是用戶調用foo()方法的時候，在傳遞的參數options對象中設置了相應的值，
那麼就使用設置的值，不然使用默認值，調用方法：

foo({name:"a",length:4,dataType:"json"});
foo({name:"a"});
foo();

　　編寫jQuery插件

 封裝jQuery對你方法的插件，首先須要在javaScript文件裏搭好框架，代碼以下：

;(function($){
    //這裏寫插件代碼
})(jQuery);

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

;(function($){
 $.fn.extend({
  "color":function(value){
  //這裏寫插件代碼
  }
 });
})(jQuery);

　　  或者

;(function($){
 $.fn.color=function(value){
   //這裏寫插件代碼
 }
})(jQuery);

　　這裏的方法提供一個參數value,若是調用方法時傳入value，那麼就用這個值來設置字體顏色,不然就是獲取匹配無此的字體顏色的值

;(function($){
	$.fn.extend({
		"color":function(value){
			return this.css("color",value);
		}
	});
})(jQuery);

　　
  插件內部的this指向的是jQuery對象，而非普通的DOM對象。接下來注意的是，插件若是不須要返回字符串之類的特定值，應當使其具備可連接性。 

  爲此，直接返回這個this這個對象，因爲css()方法也會返回調用它的對象，即此外的this，所以能夠將代碼寫成上面的形式;

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

  另外若是要定義一組插件，可使用以下所示寫法：

;(function($){
	$.fn.extend({
		"color":function(value){
			//這裏寫插件代碼
		},
		"border":function(value){
			//這裏寫插件代碼
		},
		"background":function(value){
			//這裏寫插件代碼
		}
	});
})(jQuery);

　　2.封裝全局函數的插件

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

 例如新增兩個函數，用於去除左側和右側的空格。

 首先構建一個Object對象，把函數名和函數都放進去，其中的名/值對分別爲函數名和函數主體
 而後利用jQuery.extend()方法直接對jQuery對象進行擴展

 jQuery代碼以下：

;(function($){
	$.extend({
		ltrim:function(text){
			return (text||"").replace(/^\s+g,"");
		},
		rtrim:function(text){
			return (text||"").replace(/\s+$/g,"");
		}
	});
})(jQuery);
或者
;(function($){
	$.ltrim=function(text){
		return (text||"").replace(/^\s+g,"");
	},
	$.rtrim=function(text){
		return (text||"").replace(/\s+$/g,"");
	}
	
})(jQuery);

　　 *(text||"")部分是用於防止傳遞進來的text這個字符串變量處於未定義的特殊狀態，若是text是undeined，則返回字符串""，不然返回字符串text。

 

  這個處理是爲了保證接下來的字符串替換方法replace()方法不會出錯

 *運用了正則表達式替換首末的空格

 調用函數：

$("trimTest").val(
	jQuery.trim(" test ")+"\n"+
	jQuery.ltrim(" test ")+"\n"+
	jQuery.rtrim(" test ")
);

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