jQuery的$.extend和$.fn.extend作用及区别

jQuery为开发插件提拱了两个方法，分别是：

1 jQuery.extend()

2 jQuery.fn.extend()

jQuery.extend()

jQuery.extend方法是我们常用的方法，也是jQuery源码中的基础方法。它的主要作用是：将一个或多个“源对象”合并到一个“目标对象”中，并返回目标对象。它主要有三种表现形式：

a、jQuery.extend(destination, source1, source2, source3 ….)

b、jQuery.extend( source )

c、jQuery.extend(boolean, destination, source1, source2, source3 ….)

a方式第一个参数作为“目标对象”，其它参数作为“源对象”。

b方式只有一个参数，这里的这个参数变成了“源对象”，“目标对象”变成了jQuery。说白了就是”源对象”的属性，变成jQuery函数的静态方法或属性。

c方式的第一个参数是boolean类型的，第二个参数是”目标对象”，剩下的参数是“源对象”。当第一个参数的值为true时，表示对象合并时支持“深拷贝”。

jQuery.fn.extend(object);

jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {//….　

};

原来 jQuery.fn = jQuery.prototype.

所以，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});

$("#input1").doAlertWhileClick();

// 调用方法

$(“#input1”)为一个jQuery实例，当它调用成员方法 doAlertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。