jQuery.extend()、jQuery.fn.extend()擴展方法範例詳解_jquery

jQuery自訂了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠建立全域函數或選擇器,而jQuery.fn.extend()方法能夠建立jQuery物件方法.

例如:

複製程式碼 程式碼如下:

程式碼如下:


{Query.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); c擁有a,b); c擁有a,b);

c擁有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.pro> jQuery.fn = jQuery.proproery.pronal> 　　　init: function( selector, context ) {//....　

　　　//......

};



};

例如:

複製程式碼

程式碼如下:

程式碼如下:


alert("這是jQuery物件方法!");
}
jQuery("div").click(function(){
$(this).test (); //在目前的jQuery物件上呼叫test()方法
});

我們可以呼叫jQuery.fn.extend()方法來建立jQuery物件方法. 複製程式碼 程式碼如下: jQuery.fn.extend({ test :unction( ){ return this.each(function(){ alert(this.nodeName) }); } }); jQuery("body *"). click(function(){ $(this).test(); //呼叫jQuery物件方法}); 一句話:jQuery.extend是對JQuery類別的自訂擴充,jQuery.fn.extend是對JQuery物件的自訂擴充.