jQuery.extend()、jQuery.fn.extend()擴充方法詳解

標籤：jquery   外掛程式   jquery.extend   jquery.fn.extend   

jQuery自訂了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠建立全域函數或者選取器,而jQuery.fn.extend()方法能夠建立jQuery對象方法.
例如:

jQuery.extend({    showName : function(name){        alert(name)    }});jQuery.showName("深藍");

jQuery.extend()除了可以建立外掛程式外,還可以用來擴充jQuery對象.
例如:

var a = {    name : "blue",    pass : 123}var b = {    name : "red",    pass : 456,    age : 1}var c = jQuery.extend({},a,b);

c擁有a,b對象的屬性,由於,b對象在a對象之後,其name屬性優先在c對象裡.

jQuery.extend()方法為外掛程式傳遞系列選項,包括預設值.

function fn(options){    var options = jQuery.extend({    //預設參數選項列表        name1 : value1,        name2 : value2,        name3 : value3    },options);   //使用函數的參數覆蓋或合并到預設參數選項列表中    //函數體}fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值fn({ name4 : value3, name5 : value2 });//在預設上添加新選項fn();    //保持預設選項值

當在調用該方法時,傳遞新的參數值,就會覆蓋掉預設的參數選項值,否則,使用預設參數值.

使用JQuery.fn對象建立JQuery對象方法

可以通過jQuery.fn對象來添加屬性和方法,實際上jQuery.fn對象就是掛接在jQuery.prototype上的,jQuery把它簡寫了.

fn 是什麼東西呢。查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype = {

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

　　　//......

};

 

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。

例如:

jQuery.fn.test = function(){    alert("這是jQuery對象方法!");}jQuery("div").click(function(){    $(this).test();   //在當前的jQuery對象上調用test()方法});

我們可以調用jQuery.fn.extend()方法來建立jQuery對象方法.

jQuery.fn.extend({    test : function(){        return this.each(function(){            alert(this.nodeName)        });    }});jQuery("body *").click(function(){    $(this).test();     //調用jQuery對象方法});

一句話:jQuery.extend是對JQuery類的自訂擴充,jQuery.fn.extend是對JQuery對象的自訂擴充.