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,li这些子节点都是DOM元素节点。可以通过JavaScript中的getElementByTagname或者getElementById来获取节点。像这样得到的DOM元素就是DOM对象。DOM可以使用JavaScript中的方法。

    var domObj = document.getElementById("id");
    var ObjHTML = document.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之类的写法都是错误的，同样，DOM对象也不能使用jQuery里的方法。

JQuery对象和DOM对象的相互装换

养成定义变量的风格，如果获取的对象是jQuery对象，那么在变量前面加上$。

    var $variable = jQuery对象;

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

    var variable = DOM对象;

1. jQuery对象转换为DOM对象

jQuery对象不能使用DOM中方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象时候，有以下两种处理方法。

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

jQuery对象是一个类似数组的对象，可以通过index的方法得到相应的DOM对象。

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

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

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

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

    var cr = document.getElementById("cr");
    var $cr = $(cr);

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

最后再次强调：DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM。