DOM对象和jQuery对象

以下内容引用于《锋利的jQuery》。

1- 什么是DOM对象？
文档对象模型（DOM，Document Object Model）。
每一份DOM都可以表示一颗树，如下图：

在这颗DOM树中，< h3 >、< p >、< ul >、< li >都是DOM元素节点。我们可以通过JavaScript中的getElementsByTagName来获取它们。像这样通过getElementsByTagName 和 getElementById得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中方法。如：

var domObj = document.getElementById("id");  //获取DOM对象
var ObjHTML = domObj .innerHTML;             //使用JavaScript中的方法

---

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

$("#id").html();       //获取元素内的html代码，.html()是jQuery里的方法。

这段代码等价于：

document.getElementById("id").innerHTML；

---

3- 重点
jQuery对象无法使用DOM对象的任何方法。比如 $(“#id”).innerHTML、$(“#id”).checked之类的写法是错误的。
同样，DOM对象也不能使用jQuery里的方法。比如document.getElementById(“id”).html()写法是错误的。

---

4- jQuery对象和DOM对象的相互转换

• jQuery对象转成DOM对象
  提供两种方式来将一个 jQuery对象转换成DOM对象：[index] 和 .get(index)。

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

var x = $("#id");        //jQuery对象
var xDOM = x[0];         //DOM对象

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

var x = $("#id");       //jQuery对象
var xDOM = x.get(0);    //DOM对象

• DOM对象转成 jQuery对象
  对于DOM对象，我们只需要用$()把DOM对象包装起来，就可以获得jQuery对象了。

var x = document.getElementById("id");      //DOM对象
var xjQuery = $(x);                         //jQuery对象

---

5- 实例
选中复选框后，提示已经选中。
html代码：

<input type="checkbox" id="my">
<label for="my">我已经阅读了条款。</label>

DOM的判断方式：

    $("#my").click(function () {
        var x = $("#my");    //jQuery对象，或者使用$(this)
        var xDOM = x[0];     //DOM对象
        if (xDOM.checked)    //DOM方式判断
            alert("感谢阅读！");
    });

jQuery中的判断方式：

    $("#my").click(function () {
        var x = $("#my");           //jQuery对象，或者使用$(this)
        if (x.is("input:checked"))  //jQuery中的方式判断
            alert("感谢阅读！");
    });