jQuery对象和DOM对象

    第一次学习jQuery，经常分辨不清哪些是jquery对象、哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。

一、DOM对象和jQuery对象简介

1、DOM对象

    DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。下面来通过构建一个非常基本的网页，网页代码如下：

//……省略其他代码
<h3>例子</h3>
<p title="选择你最喜欢的水果。">你最喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
//……省略其他代码

可以把上边的HTML结构描述为一棵DOM树，如下：

在这棵DOM树中，<h3>、<p>、<ul>以及<ul>的3个<li>子节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。示例如下：

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").attr("checked")之类的jQuery方法来代替。同样，DOM对象也不能使用jQuery里的方法。例如document.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。

二、jQuery对象与DOM对象的相互转换

约定如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

var $variable = jQuery对象;

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

var variable = DOM对象;

1、jQuery对象转成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。

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

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是否被选中了

2、DOM对象转成jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方式为$(DOM对象).

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

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

通过以上方法可以任意地相互转换jQuery对象和DOM对象。