jQuery对象和DOM对象是完全不一样的，在介绍两者区别之前，我们先来看一个简单的例子：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").innerText = "绿叶学习网";
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

咦，怎么回事？ $("div").innerText不是用于设置div元素内部文本内容的吗？为什么页面没有内容呢？

其实$("div")获取的是一个jQuery对象，而innerText却是DOM对象的属性。jQuery对象跟DOM对象是两个完全不同的对象，很多初学者很容易忽略这一点。我们把jQuery对象比作“张三”，把DOM对象比作“李四”，那么innerText就是“李四的儿子”。张三（jQuery）怎么可以随便就把别人的儿子（innerText）当成自己的儿子来使唤呢，对吧？

小伙伴们一定要记住，如果你获取的是jQuery对象，就只能使用jQuery的方法。如果你获取的是DOM对象，就只能使用DOM方法（即原生JavaScript方法），两者是不能混用的。因此，对于上面这个例子，正确的做法有两种：

//方法1：使用jQuery
$("div").text("绿叶学习网")

//方法2：使用DOM

var oDiv = document.getElementsByTagName(“div”)[0];

oDiv.innerText=“绿叶学习网”;

总而言之，凡是使用$()来获取到的都是jQuery对象，必须使用jQuery的方法。

在使用jQuery的过程中，有时我们又想使用DOM对象的方法或属性，这个时候就需要将jQuery对象转化为DOM对象。在jQuery中，想要将一个jQuery对象转化为DOM对象，有两种方法：一种是“下标方式”；另外一种是“get()方法”。

语法：

//方法1
$()[n]


//方法2
$().get(n)

说明：

这里，$()表示的是你获取的jQuery对象。对于get()方法来说，get(0)表示获取第1个元素，get(1)表示获取第2个元素……以此类推。当参数省略时，表示获取的是一个元素集合。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var $li = $("li");               //获取jQuery对象
            var oLi = $("li").get();         //转换为DOM对象
            oLi.reverse();                   //调用数组方法，颠倒元素顺序
            $("ul").html(oLi);               //插入元素
        })
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

由于get()方法的参数省略，因此$("li").get()获取的是一个DOM元素集合。如果想要获取第1个li元素，我们可以使用$("li").get(0)来实现。下面两行代码其实是等价的：

$("li").get(0)
$("li")[0]

不过注意一点，上面两行代码获取的结果都是DOM对象，而不再是jQuery对象了。