jQuery.fn.extend() 函数详解

jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

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

该函数属于jQuery的原型对象(jQuery.fn)。

先看以下例子：

姓名：<input id="name" name="name" type="text" >
<br>
<input name="opt" type="checkbox" value="A">A
<input name="opt" type="checkbox" value="B">B
<input name="opt" type="checkbox" value="C">C
<input name="opt" type="checkbox" value="D">D
<br>
<input id="btn" type="button" value="点击">

var obj = {
    site: "CodePlayer",
    check: function(){
        // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
        this.prop("checked", true);
        return this;
    },
    isEmpty: function(){
        return !$.trim( this.val() );
    }
};

// 将对象obj的属性和方法扩展到jQuery的原型对象上，以便于jQuery实例对象调用。
$.fn.extend( obj );


$("#btn").click(function(){
    if( $("#name").isEmpty() ){
        alert("姓名不能为空!");
        return false;
    }
    $("[name=opt]").check( ); // 全选复选框
    
    alert( $("body").site ); // CodePlayer
});

实际上，如果你也可以在jQuery的原型上自行添加新的属性或方法，例如上面的扩展代码等价于：

$.fn.site = "CodePlayer";

$.fn.check = function(){
    // 扩展到jQuery原型上后，这里的this表示当前jQuery对象
    this.prop("checked", true);
    return this;
};

$.fn.isEmpty = function(){
    return !$.trim( this.val() );
};

有时候会遇到这种写法：

$.fn.extend({}, this, obj)

用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构