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

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 对象不支持。