jQuery对象和DOM对象

小咪咪 2022-05-17 10:26 261阅读 0赞

第一次学习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树，如下：

![70][]

在这棵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对象 ###