Question

任何人都可以解释以下行为吗？

var ctx = $('#myCanvas').getContext("2d");      //doesnt work 
var ctx = $('#myCanvas')[0].getContext("2d");   //works
canvasWidth = $('#myCanvas').width();           //works
canvasHeight = $('#myCanvas').height();         //works
canvasWidth = $('#myCanvas')[0].width();        //doesnt work
canvasHeight = $('#myCanvas')[0].height();      //doesnt work

Answer 1

$('#myCanvas')是jQuery object。 $('#myCanvas')[0]是DOM element。

width()和height()是jQuery对象公开的方法。你不能在DOM元素上调用它们，因为它们没有实现它们（到目前为止）。

同样，getContext()是<canvas> DOM元素公开的方法，jQuery对象不支持它。

Answer 2

$('#myCanvas')返回一个jquery对象，而$('#myCanvas')[0]返回HTML / DOM元素。

以类似的方式，$(selector).eq(0)将列表中的第一项作为jquery对象返回，而$(selector).get(0)返回HTML / DOM元素。

Answer 3

getContext不是jquery函数，它是一个元素函数。 width和height是在jQuery对象上调用的jquery函数。

另见：jQuery dynamic canvas creation, $ctx.getContext is not a function

jQuery选择器给出不一致的行为

3 个答案: