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();