对于jQuery的初学者来说，经常分辨不清DOM对象和jQuery对象，本文简单说明两者的区别和两种对象相互转换的方法。如你已掌握可以略过，如文中有错误之处请您指正。

DOM对象

---

DOM对象对有HTML基础的人来说，并不陌生：DOM（Document Object Model）即文档对象模型，每一份DOM都可以表示成一棵树，如下基本网页：

可以将上面HTML结构描述为一颗DOM树：

                     head——meta、title

HTML——

                    body——h1、p、ul(li、li、li)

在这颗DOM树中，<h1>、<p>、<ul>和<ul>的三个<li>子节点都是DOM元素节点。可以通过JavaScript中的 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以用JavaScript中的方法：

var domObj = document.getElementById("id");  //获得DOM对象

var ObjHTML = domObj.innerHTML;  //使用JavaScript中的方法——innerHTML

jQuery对象

---

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，例如：

$("#foo").html();  //获取id为foo的元素内的html代码

这段代码等同于：

document.getElementById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法。如 $("#id").innerHTML 和$("#id").checked 之类的写法都是错误的，可以使用 $("#id").html() 和 $("#id").attr("checked") 之类的jQuery方法代替。同样，DOM对象也不能使用jQuery里的方法。例如：document.getElementById("id").html()也会报错，只能用 document.getElementById("id").innerHTML语句。

用 #id 作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象，两者并不等价。

DOM对象转换为jQuery对象

---

对于一个DOM对象，只需要用 $() 把DOM对象包装起来，就可以获得一个jQuery对象了，方式为 $("DOM对象")。jQuery代码如下：

var cr = document.getElementById("cr");  //DOM对象

var $cr = $(cr); //jQuery对象

转换后，可以任意使用jQuery中的方法。

jQuery对象转换为DOM对象

---

jQuery对象转换为DOM对象，一般有以下两种方法：

（1）jQuery对象是一个数组对象，可以通过 [index] 的方法得到相应的DOM对象：

var $cr = $("#cr");  //jQuery对象

var cr = $cr[0];  //DOM对象

alert(cr.checked);  //检测这个checkbox是否被选中

（2）另一种是jQuery本身提供的，通过 get(index) 方法得到相应的DOM对象：

var $cr = $("#cr");  //jQuery对象

var cr = $cr.get(0); //DOM对象

alert(cr.checked);//检测这个checkbox是否被选中

关于对象变量的命名建议

---

约定好代码的编写的风格，对自己的编程速度和日后理解还有团队的配合都有很好的作用，这里就简单介绍对象变量的命名建议，如有更好的方法，请交流学习。

一个简单的方法，如果获取的对象是jQuery对象，那么变量前加上$:

var $variable = jQuery对象；

如果获取的对象是DOM对象，则定义如下：

var variable = DOM对象；