jQuery - 函式 $.extend 和 $.fn.extend 的說明

一、區別說明

    jQuery.extend是對JQuery類的自定義擴充套件，可以理解為給jQuery這個類新增靜態的方法

    jQuery.fn.extend是對JQuery物件的自定義擴充套件，可以理解為給jQuery的例項新增私有方法

二、jQuery.extend

    1、建立JQuery外掛

        （1）示例

$.extend({
	myalert : function(){
		alert('jquery extend !');
	}
});

        （2）呼叫

$.myalert();

    2、合併JQuery物件

        （1）一般模式

var css1 = {color:'red', margin:'3px'};
var css2 = {color:'blue', padding:'2px'};

//	合併到css1
$.extend(css1,css2);   

//	合併但不更改css1
var css3 = $.extend({},css1,css2);

// ==> {color:'blue', margin:'3px', padding:'2px'}

        （2）深度合併

$.extend( true,   
	{ name: "John", location: { city: "Boston" } },   
	{ last: "Resig", location: { state: "MA" } }   
); 
  
// ==> {name: “John", last: "Resig", location: { city: "Boston", state: "MA" } }

    3、為JQuery外掛傳遞預設值

//	定義外掛
$.extend({
	updateStyle : function(tagerId, options){
		$("#" + tagerId).css(options);
	}
});

//	封裝外掛新增預設值
function newUpdateStyle(tagerId, options){
	var defultOpts = {
		width : '160px',
		height : '40px',
		color : 'red'
	}
	$.updateStyle(tagerId, $.extend(defultOpts, options));
}

//	使用預設值
newUpdateStyle("inputTest");
//	使用自定義值
newUpdateStyle("inputTest", {color : 'blue'});

三、jQuery.fn.extend

//	建立jQuery物件方法
jQuery.fn.extend({ 
	showContent : function(){
		alert($(this).val());
	}
});

//	呼叫
$("#inputTest").showContent();