DOM對象和jQuery對象的區別

var cvs = $("#cvs_"+this.index).getContext("2d"); //錯的

var cvs = $("#cvs_"+this.index)[0].getContext("2d");//對的

DOM對象和jQuery對象是兩種不一樣的對象，它們的實例也所以具備不一樣的屬性和方法。一般要操做頁面中的節點，咱們都須要想辦法獲取對該節點的引用。好比以下代碼：

1	var  dom = document.getElementById( '節點id' );

這是經過節點的id來獲取一個頁面節點，也就是對節點的引用。這個時候，咱們對變量dom的任何操做，實際上就是對頁面節點的操做，好比說修改樣式、移除節點、獲取屬性等等。以下：

1 2 3

dom.style.display =  'none' ;  // 隱藏節點 dom.parentNode.removeChild(dom);  // 刪除節點 var  height = dom.offsetHeight;  // 獲取節點高度

像上面的style、parentNode、removeChild、offsetHeight等等，都是DOM對象的屬性或方法。

 

由於DOM對象不屬於javascript的一部分，它是各個瀏覽器對javascript的擴展，但各個瀏覽器又都在實現上有一些不一致，致使javascript代碼須要處理不少兼容性問題。爲了解決這些兼容性問題，提升開發效率，jQuery庫就誕生了。

 

jQuery解決了兼容性問題，再加上它的實現極其巧妙，所以獲得了不少人的吹捧。之前有一點javascript基礎的人，要寫出稍微複雜些的特效，幾乎都不可能，但由於jQuery的出現，相似顯示隱藏、各類動畫效果，都只須要簡單的幾行代碼便可。有些人甚至以爲，jQuery甚至都能替代javascript，並且在各個前端學習的站點、博客中，也是將jQuery和javascript並列做爲一類。

 

但問題是，不瞭解基礎的javascript，在遇到問題、異常的時候，你就只能乾瞪眼了。任何語言，框架和庫都沒法取代最基礎的語法，並且框架和庫也都是由最簡單的語法豐富起來的。

 

jQuery實際上能夠說是一個大的類——javascript實現的類。以一個簡單的模型來講，以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

;( function (window, undefined){                window.$ = window.jQuery = jQuery;            // 定義jQuery類      function  jQuery(selector, content){          content = content || document;          var  eles = content.querySelectorAll(selector);          var  len = eles.length;                    // 給jQuery對象添加長度屬性          this .length = len;                    // 方便獲取dom對象，獲取實例：jQuery('#id')[0];          for ( var  i = 0; i < len; i++){              this [i] = eles[i];          }      }            // 擴展原型      jQuery.prototype = {          // 構造函數          constructor : jQuery,                    // 根據索引獲取dom對象          get :  function (index){              return  this [index];          }                } })(window);

這是一段jQuery的模擬代碼，你可使用以下方式調用：

1	var  jqObj =  new  jQuery( '.class' );

由於jQuery的特殊處理，寫jQuery代碼的時候不須要new便可用，但這裏沒有處理，因此須要加上new關鍵字。

 

上面返回的jqObj，就是我定義的jQuery的一個對象，它是jQuery對象，已經不是DOM對象了。我能夠寫以下代碼：

1	var  dom = jqObj.get(1);  // 獲取jQuery對象中下標爲1的DOM對象

而後變量dom就和以前的變量dom同樣，可使用DOM對象的屬性和方法了。

 

可是，咱們不能寫下面的代碼，不然它就會報異常：

1	jqObj.style.color =  'red' ;

由於jQuery對象的實例，根本就沒有style這個屬性。jQuery也是同樣的，jQuery對象和DOM對象是兩種不一樣的對象，它們的內部結構（好比上面的get方法是自定義的）也是不一樣的。當你把jQuery對象當作DOM對象使用時，你調用該對象的任何屬性和方法，都有可能觸發一個屬性或方法未定義的異常，由於這個屬性或方法確實不存在。

 

因此，若是你使用了jQuery庫，那你就得在操做節點的時候，注意區分這個節點對象究竟是DOM對象，仍是jQuery對象。基本上jQuery的方法若是返回節點對象，返回值大可能是jQuery對象，但也有例外，好比get等。

 

回到你的題目，經過jQuery獲取的canvas對象，其實是jQuery對象封裝後的對象。它沒有getContext方法，因此會報錯。但jQuery對象能夠像訪問數組同樣，經過中括號來獲取對應的DOM對象，因此第二種返回了最原始的Canvas對象，它是具備getContext方法的。