這兩種獲取畫布對象的方式有什麼區別

Question

canvas = $('#canvasID'); 

canvas = document.getElementById('canvasID'); 

有什麼區別？爲什麼我不能使用canvas.offset()當我通過第二種方式獲取畫布對象？

Answer 1

$('#canvasID')使用jQuery來獲取元素。

document.getElementById('canvasID');使用瀏覽器原生實現通過它的ID獲取元素。

$("#canvasID")的實現在瀏覽器中有所不同，但我懷疑它實際上在所有現代瀏覽器中都使用了document.getElementByID()。

第二種方法不能使用offset的原因是因爲它是jQuery對象上的方法（從$('#canvasID');返回）。

Answer 2

的.offset()方法是一個jQuery方法。 $()函數返回一個匹配選擇器的jQuery包裝對象數組。所以你可以在它們上調用jQuery方法。 document.getElementById('canvasID');返回沒有定義這種方法的本地DOM元素。

Answer 3

offset()是一個jQuery方法，可以應用於由$（或jQuery）函數返回的jQuery對象。要獲取原始畫布對象，請使用$('#canvasID')[0]訪問此對象的元素。

document.getElementById返回原始對象。要從原始HTML對象中獲取jQuery對象，請使用它調用$。

總結：

var jquery_canvas = $('#canvas'); 
var raw_canvas = jquery_canvas[0]; 
var jquery_canvas_again = $(raw_canvas); 

var context = raw_canvas.getContext('2d'); 
// NOT: jquery_canvas.getContext(), as getContext is only defined on raw object 

var offset = raw_canvas.offset(); 
// NOT: raw_canvas.offset(), as offset is only defined on a jQuery object 

Answer 4

與第一種方式，你要表示元素的jQuery的對象 - 這jQuery的對象有一個offset() - 方法。
與getElementById()你會得到一個「普通」javascrip對象，但不知道這個方法。

Answer 5

$('#canvasID')使用jQuery的

document.getElementByID('canvasID')使用瀏覽器的原生實現，基本原料的JavaScript。

您不能使用.offset()方法，因爲您試圖在非jQuery對象上使用它。