js中的DOM对象 和 jQuery对象比较

1.二者的区别

　　jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

　　通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象。举例：

　　针对下面这样一个div结构：

<div></div>
<div id="app"></div>
<div class="Box"></div>
<div class="Box"></div>
<div></div>

　　通过原生 js 获取这些元素节点的方式是：

var myBox = document.getElementById("app");           //通过 id 获取单个元素
var BoxArr = document.getElementsByClassName("Box");  //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

　　通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

//获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.Box'));
console.log($('div'));

2.二者的相互转换

　　2.1 DOM 对象 转为 jQuery对象：

$(js对象);

　　2.2 jQuery对象 转为 DOM 对象：

jquery对象[index];      //方式1（推荐）
jquery对象.get(index);  //方式2

　　jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';