初学jQuery，感觉jQuery对象和DOM对象的区分，对于以后的学习还是很重要的，把自己的体会给大家分享一下，欢迎喷！
DOM称为文档对象模型，是W3C制定的一套标准，是把构成html页面元素（如html, title, body, input等）定义为标准对象，通过这些对象可以访问到这些元素并可以进行处理（如修改属性，增删元素等操作）。
jQuery对象，我在网上没有找到官方的解释，我认为可以粗暴地认为jQuery对象就是把DOM对象用一个数组进行了封装，数组中的元素就是DOM元素。
我们来做以下验证：
在页面中，我们添加一个input标签（这个标签是什么类型无所谓，只是为了演示而已）：
<input id="id1" name="name1" class="abc"/>然后分别用DOM方式和jQuery方式选择到这个元素，并将这个元素打印到控制台：
//DOM方式获取元素
var dom_obj = document.getElementById("id1")
console.log(dom_obj);
//jQuery方式获取元素
var $jq_obj = $('#id1');
console.log($jq_obj);控制台输出为：
从输出可以看出，DOM方式只是单独的一个元素，而jQuery方式则是将这个元素用一个数组包起来，并还加了一些其他的信息（这些其他信息，呃，我还没弄明白，就不乱说了……）
我们来将这两个元素展开，看看这个对象都包含些什么内容
先来展开DOM方式获取的元素
由于这个展示内容很多，我截图就只截前面一部分了，后面的都是一样的各种属性。这些属性，我们都可以使用 “.”操作符来访问：
console.log(dom_obj.attributes);//返回一个属性数组
console.log(dom_obj.attributes[0]);//通过下标可以获取属性数组中具体的属性
console.log(dom_obj.autofocus);//直接返回元素中的autofocus的属性值控制台输出为：
可以看出，DOM元素的属性，我们可以直接通过“.”操作符来访问，如果是单属性的，则直接返回这个属性的值，对于有多个值的属性，则以数组的形式返回，然后通过下标的形式访问到具体的值。当然，也可以对这些属性进行赋值。这里就不演示了。
我们再来看看jQuery对象，展开是什么样子：
jQuery对象就是一个数组，展开后，首先是获取到的DOM元素，后面是一些附加信息。从这里，我们也可以知道，通过“.”操作符，我们只能获取到context, length, selector，分别对应于Element类型（jQuery1.10标记为过时，后期可能会被移除，我们就不再分析了），获取的元素个数，选择器属性
除了以上三个属性，我们再无法直接访问到其他属性了，这也是我们不能使用DOM方式获取jQuery对象的属性值的原因。
对于大多数情况下，我们并不关心context, length, selector这三个属性，而是会关心我们选择到的元素的一些属性，虽然我们不能使用DOM方式去访问这些属性，jQuery为我们提供了相应的方法去获取，下面随便写两个，其他的，大家可以自己去试
console.log($jq_obj.attr('id'));//获取id值
console.log($jq_obj.html());//获取元素的innerHTML最后，就是DOM对象和jQuery对象的转换了，方式很简单：
DOM转jQuery：
var $jq_obj = $(dom_obj); //直接通过$()方式转换jQuery转DOM
var dom_obj1 = $jq_obj[index];//方式一，通过[]方式，index为下标
var dom_obj2 = $jq_obj.get(index);//方式二，通过get()方法，index为下标为演示可以选择到多上元素的选择器，我们将页面中的元素添加到三个，这三个元素都有同样的class属性值：
<input id="id1" name="name1" class="abc"/>
<input class="abc" id="id2" name="name2">
<button class="abc" name="name3"></button>下面，是对DOM对象和jQuery对象的转换进行演示：
/*DOM对象*/
//id选择器，只会选择到最多一个元素
var dom_obj1 = document.getElementById("id1");//选择到一个元素，返回这个元素
var dom_obj2 = document.getElementById("fhdf");//选择不到元素，返回null
console.log("id选择器选择的DOM对象");
console.log(dom_obj1);
console.log(dom_obj2);
//转换为jQuery对象
var $dom_obj1 = $(dom_obj1);
var $dom_obj2 = $(dom_obj2);
console.log("将id选择器选择的DOM对象转换为jQuery对象");
console.log($dom_obj1);
console.log($dom_obj2);
//类选择器，可能会选择到多个元素
var dom_obj3 = document.getElementsByClassName("abc");//选择到三个元素，返回包含这些元素的数组
var dom_obj4 = document.getElementsByClassName("afgjdfg");//选择不到元素，返回长度为0的数组
console.log("类选择器选择的DOM对象");
console.log(dom_obj3);
console.log(dom_obj4);
//转换为jQuery对象
var $dom_obj3 = $(dom_obj3);
var $dom_obj4 = $(dom_obj4);
console.log("将类选择器选择的DOM对象转换为jQuery对象");
console.log($dom_obj3);
console.log($dom_obj4);
/*jQuery对象*/
//id选择器，只会选择到最多一个元素
var $jq_obj1 = $("#id1");//选择到一个元素
var $jq_obj2 = $("#fjkhfhg");//选择不到元素
console.log("id选择器选择的jQuery对象");
console.log($jq_obj1);
console.log($jq_obj2);
var jq_obj1 = $jq_obj1[0];
var jq_obj2 = $jq_obj1.get(0);
console.log("将id选择器选择的jQuery对象转换为DOM对象");
console.log(jq_obj1);
console.log(jq_obj2);
//类选择器，可能会选择到多个元素
var $jq_obj3 = $(".abc");//选择到三个元素
var $jq_obj4 = $(".lkj");//选择不到元素
console.log("类选择器选择的DOM对象");
console.log($jq_obj3);
console.log($jq_obj4);
var jq_obj3 = $jq_obj3[0];
var jq_obj4 = $jq_obj3.get(0);
var jq_obj5 = $jq_obj3[1];
var jq_obj6 = $jq_obj3.get(1);
console.log("将id选择器选择的jQuery对象转换为DOM对象");
console.log(jq_obj3);
console.log(jq_obj4);
console.log(jq_obj5);
console.log(jq_obj6);控制台输出为：
综上所述：
- jQuery对象可以看作是将DOM对象进行了封装
- DOM对象选择不到元素，如果是单元素选择器是返回null，多元素选择器是返回一个长度为0的空数组；jQuery对象，无论是多元素还是单元素选择器，都是返回一个长度为0的空数组
- DOM对象一般是通过“.”操作符来访问和操作属性，jQuery对象是提供了一系列方法来访问和操作属性，二者访问操作属性的方式不能通用。
- 两种对象之间可以方便地转换