快捷導(dǎo)航

擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)

更新時(shí)間：2014年04月25日 15:29:59 作者：

這篇文章主要介紹了擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量,需要的朋友可以參考下

先看一段代碼：

 
jQuery.fn.extend( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return this.myOwnMember; }, 
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; } 
} 
); 

$("body").myOwnMember; //3 
$("body").getMyOwnMember(); //3 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //3 

這段代碼給jQuery對(duì)象擴(kuò)展了一個(gè)成員myOwnMember，兩個(gè)函數(shù)getMyOwnMember，setMyOwnMember分別用于返回和設(shè)置myOwnMember的值。但是我們看到setMyOwnMember并沒有起作用，我們?cè)俅蝕etMyOwnMember時(shí)，返回的還是初始的值。這是為什么呢？原因在于$("body")每次都會(huì)創(chuàng)建一個(gè)新對(duì)象，所以每次$("body")里面的myOwnMember都是初始值。如果我們將代碼改成：

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

 
jQuery.fn.extend( 
{ 
myOwnMember: 3, 
getMyOwnMember: function () { return this.myOwnMember; }, 
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; } 
} 
); 

var body = $("body"); 
body.myOwnMember; //3 
body.getMyOwnMember(); //3 
body.setMyOwnMember(4); //4 
body.getMyOwnMember(); //4 

這就是我們想要的效果了，這是因?yàn)?("body")只創(chuàng)建了一次，后面都是通過body變量進(jìn)行的引用。但是這種方法在實(shí)際使用過程中還是存在問題，因?yàn)槲也豢赡茉谌址秶鷥?nèi)都能夠引用到body變量，很多時(shí)候還是通過$("body")來獲取dom節(jié)點(diǎn)，這樣的話我們又怎么保存一個(gè)jQuery對(duì)象擴(kuò)展變量的值呢？解決方法是我們不要把變量保存在jQuery對(duì)象上，而是保存在dom節(jié)點(diǎn)上，無論在一個(gè)dom節(jié)點(diǎn)上創(chuàng)建多少個(gè)jQuery對(duì)象，都是指向同一個(gè)dom節(jié)點(diǎn)的。所以我們將代碼改成如下：

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

 
jQuery.fn.extend( 
{ 
getMyOwnMember: function () { return this[0].myOwnMember; }, 
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0].myOwnMember; } 
} 
); 

$("body").getMyOwnMember(); //undefined 
$("body").setMyOwnMember(4); //4 
$("body").getMyOwnMember(); //4 

您可能感興趣的文章: