2017/9/30 dom对象和jQuery对象

         自学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对象程序就可以正常执行了