快捷導(dǎo)航

jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解

更新時(shí)間：2014年05月08日 16:51:12 作者：

這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法的應(yīng)用,需要的朋友可以參考下

jQuery自定義了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能夠創(chuàng)建全局函數(shù)或者選擇器,而jQuery.fn.extend()方法能夠創(chuàng)建jQuery對(duì)象方法.

例如:

復(fù)制代碼代碼如下:

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

jQuery.extend()除了可以創(chuàng)建插件外,還可以用來(lái)擴(kuò)展jQuery對(duì)象.
例如:

復(fù)制代碼代碼如下:

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

c擁有a,b對(duì)象的屬性,由于,b對(duì)象在a對(duì)象之后,其name屬性優(yōu)先在c對(duì)象里.

jQuery.extend()方法為插件傳遞系列選項(xiàng),包括默認(rèn)值.

復(fù)制代碼代碼如下:

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

當(dāng)在調(diào)用該方法時(shí),傳遞新的參數(shù)值,就會(huì)覆蓋掉默認(rèn)的參數(shù)選項(xiàng)值,否則,使用默認(rèn)參數(shù)值.

使用JQuery.fn對(duì)象創(chuàng)建JQuery對(duì)象方法

可以通過(guò)jQuery.fn對(duì)象來(lái)添加屬性和方法,實(shí)際上jQuery.fn對(duì)象就是掛接在jQuery.prototype上的,jQuery把它簡(jiǎn)寫(xiě)了.

fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。

復(fù)制代碼代碼如下:

 
jQuery.fn = jQuery.prototype = { 

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

　　　//...... 

};

原來(lái) jQuery.fn = jQuery.prototype.對(duì)prototype肯定不會(huì)陌生啦。

例如:

復(fù)制代碼代碼如下:

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

我們可以調(diào)用jQuery.fn.extend()方法來(lái)創(chuàng)建jQuery對(duì)象方法.

復(fù)制代碼代碼如下:

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

一句話:jQuery.extend是對(duì)JQuery類的自定義擴(kuò)展,jQuery.fn.extend是對(duì)JQuery對(duì)象的自定義擴(kuò)展.

您可能感興趣的文章: