第一次学习jQuery，经常会搞不清楚哪些是jQuery对象、哪些是DOM对象，所以需要重点了解它们以及它们之间的关系。
1. DOM对象
DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。下面我们构建一个非常基本的网页，网页代码如下
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- </head>
- <body>
- <h3>例子</h3>
- <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
- <ul>
- <li>苹果</li>
- <li>橘子</li>
- <li>菠萝</li>
- </ul>
- </body>
- </html>
初始化效果图如图1-13所示。
 |
| 图1-13 一个非常基本的网页 |
 |
| （点击查看大图）图1-14 把网页元素表示为文档树 |
- var domObj = document.
getElementById("id"); // 获得DOM对象- var ObjHTML = domObj.innerHTML;
//使用JavaScript中的方法-- innerHTML
2. jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法。
例如：
- $("#foo").html(); // 获取id为foo的元素内的html代码。.html() 是jQuery里的方法。
这段代码等同于：
- 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对象，两者并不等价。关于"#"选择符的运用，我们将在下一章进行讲解。从学习jQuery一开始就应当树立正确的观念，认识jQuery对象和DOM对象之间的区别，一旦能够跨越这道坎，之后学习jQuery的路子就轻松多了。
From：
http://hi.baidu.com/jiang_yy_jiang/blog/item/259439deb625ca5895ee3718.html