自学canvas的时候,很简单的练习代码都执行不出来,原因是我用jQuery获取的对象,可以输出到jQuery对象,但是输出$('#canvas').getContext('2d')的时候,发现输出结果是undefined;于是上网百度原因,这才知道还有dom对象和jQuery对象的区别,就了解了一下。
DOM对象,即是我们用传统的方法(javascript)获得的对象,
jQuery对象即是用jQuery类库的选择器获得的对象;
更直观一点:
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
jQuery对象就是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
jQuery对象是不可以使用dom对象的方法的,这就是问题所在!
例如$("#id").style.color ;在语法上是不对的,只能写成例如$("#id").attr('color');(jQuery对象使用jQuery特有的方法)
jQuery对象的实例,根本就没有style这个属性。jQuery对象和DOM对象是两种不同的对象,它们的内部结构也是不同的。当你把jQuery对象当做DOM对象使用时,你调用该对象的任何属性和方法,都有可能触发一个属性或方法未定义的异常,因为这个属性或方法确实不存在。
dom对象和jQuery对象的相互转换:
1) jQuery对象 --> dom对象:
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 (或者可以写成 var cr=$cr.get(0);)
2) dom对象 --> jQuery对象:
var can = document.getElementById('can'); //dom对象
var $can = $(can);//jQuery对象
回到最初的问题,getContext方法是JavaScript dom对象特有的方法,所以把jQuery对象转化成dom对象程序就可以正常执行了