在使用jQuery的时候经常会将jQuery对象和DOM对象弄混，在搞不清楚关系的时候，经常会将两者的方法混用、乱用。

   1、DOM对象和jQuery对象的关系

   DOM即文档对象模型，每一份DOM都可以表示成一棵树，可以通过javascript中的getElementByTagName或者getElementById来获取元素节点，像这样得到的DOM元素就是DOM对象，DOM对象可以使用javascript中的方法。

   jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。

$('#foo').html(); // 获取id为foo的元素内的html代码，html()是jQuery的方法。
 
document.getElementById('foo').innerHTML; // 这是DOM对象的方法，与上面的代码等价。

   2、jQuery对象和DOM对象的相互转换

   (1)jQuery对象转为DOM对象

   jQuery对象是一个类似数组的对象，可以通过[index]的方法来得到相应的DOM对象，同时jQuery本身也提供了一个get(index)方法来获取DOM对象。所以，jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。

var $cr = $('#cr'); // 变量$cr表示一个jQuery对象
var cr = $cr[0]; // 变量cr表示一个DOM对象, 利用[index]方法
cr = $cr.get(0); // 利用jQuery提供的get(index)方法

   (2)DOM对象转为jQuery对象

   对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，平时用到的jQuery对象都是通过$()函数制造出来的。

var cr = document.getElementById('cr');
var $cr = $(cr); // $cr表示一个jQuery对象

   通过以上方法就可以任意的转换jQuery对象和DOM对象，只有转换为了相应的对象，才能使用相应对象中的方法。

建议继续学习：

1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读：5788)
2. phpQuery:像jQuery一样处理DOM    (阅读：3332)
3. 仅100行的JavaScript DOM操作类库    (阅读：3437)
4. 对大量子节点DOM操作的最佳实践方式    (阅读：3159)
5. 获取Dom元素的X/Y坐标    (阅读：2863)
6. DOM元素上jQuery事件几点学习    (阅读：2436)
7. React入门：关于虚拟DOM（Virtual DOM）    (阅读：2683)
8. JS操作iframe里的dom    (阅读：2356)
9. DOM Storage全解析    (阅读：2279)
10. 页面DOM加载顺序和用户视觉浏览顺序的一致性    (阅读：2251)