DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 擴展jQuery對象時如何擴展成員變量具體怎麼實現
擴展jQuery對象時如何擴展成員變量具體怎麼實現
編輯:JavaScript綜合知識     

   先看一段代碼:

  代碼如下:

  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對象擴展了一個成員myOwnMember,兩個函數getMyOwnMember,setMyOwnMember分別用於返回和設置myOwnMember的值。但是我們看到setMyOwnMember並沒有起作用,我們再次getMyOwnMember時,返回的還是初始的值。這是為什麼呢?原因在於$("body")每次都會創建一個新對象,所以每次$("body")裡面的myOwnMember都是初始值。如果我們將代碼改成:

  代碼如下:

  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

  這就是我們想要的效果了,這是因為$("body")只創建了一次,後面都是通過body變量進行的引用。但是這種方法在實際使用過程中還是存在問題,因為我不可能在全局范圍內都能夠引用到body變量,很多時候還是通過$("body")來獲取dom節點,這樣的話我們又怎麼保存一個jQuery對象擴展變量的值呢?解決方法是我們不要把變量保存在jQuery對象上,而是保存在dom節點上,無論在一個dom節點上創建多少個jQuery對象,都是指向同一個dom節點的。所以我們將代碼改成如下:

  代碼如下:

  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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved