获取canvas对象的这两种方法有什么区别

Question

canvas = $('#canvasID');

canvas = document.getElementById('canvasID');

有什么区别？当我通过第二种方式获得canvas对象时，为什么我不能使用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-object - 而jquery-object有一个offset() - 方法。
与getElementById()你得到一个“普通的”javascrip-object，但不知道这个方法。

Answer 5

$('#canvasID')使用jQuery

document.getElementByID('canvasID')使用浏览器本机实现，基本上是原始JavaScript。

您不能使用.offset()方法，因为您尝试在非jQuery对象上使用它。