JQuery 对象 和 DOM对象的转换方法
JQuery对象与DOM对象
JQuery：在JQuery库中，可以通过本身自带的方法获取页面DOM 元素的对象叫做JQuery对象。对象用var开头定义
DOM：是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。
可以通过文字理解为：
1DOM 对象 & JQuery对象
- 打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
- 其次，看到的是网页文档的内容，即document文档。
.......... - 通过本身自带的方法获取页面DOM元素，通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，
我们可以通过以下例子理解：
<p id="f-color"></p>
需求我们要获取页面上p标签，然后给这些文本添加一段文字。并且让改变原有文字颜色
通过原生JS
//获取p标签
var p =document.getElementById('f-color')；
//给P标签添加文字和颜色
p.innerText = "Hello . Javascript"；
p.style.color = "red"；
console.log(p);
js.PNG
通过JQuery
//获取对象**$('#f-color');**
var $p = $('#f-color');
//通过调用自身html css 方法进行添加内容和改变颜色
$p.html('Hello . JQurey').css('color','red');
console.log($p);
jq.PNG
由控制台输出的数据我们也可以很直观的看出来我们获取数据不同，通过原生js我们获取到DOM元素也就是DOM对象，而通过JQ我们获取的是一个伪数组的对象，这个对象包含了DOM对象的信息和操作方法
2 JQuery 对象 和 DOM对象的转换方法
2.1 我们为什么要转换那？
在工作我们会大量使用JQ。但是JQ对象不能被调用原生JS，DOM对象也同样不能调用JQ的方法，所以在某些需求下，我们要进行JQ对象和DOM对象的转化
2.2 那我们要如何转化？
在JQ中，只需要调用[index]和get(index)方法即可将JQ对象转换为DOM对象。DOM对象只需调用JQ的$()方法即可包装为JQ对象：
2.2.1 jQuery对象转化成DOM对象
①··我们可以通过jQuery DOM 元素方法 - get() 方法。
定义：get() 方法获得由选择器指定的 DOM 元素。
.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：.get(index)
语法: $(selector).get(index)
index 参数 ：可选。规定获取哪个匹配元素（通过 index 编号）。
我们同样还是用案例来理解：
<p id="f-color">Hello . JQuery</p>
<p id="f-color">Hello . JQuery</p>
<p id="f-color">Hello . JQuery</p>
我们多添加几个p标签。并且填上内容
//我们用JQ的方法获取p元素
var $p = $('p');
//通过get方法，转化成DOM对象
var p = $p.get(0);
//通过原生的方法进行操作
p.style.color = 'red';
console.log(p);
②利用下标来的方式来读取JQ中的DOM对象
数组的索引是从0开始的，也就是第一个元素下标是0
var $p = $('p');
//通过下标获取第一个元素 。并转化成DOM对象
var div = $div[0]
//操作dom对象的属性
div.style.color = 'red'
console.log(p);
其实get();是由后者包装好的，我们看看源码就知道，听说get是为了让开发者更方便才使用的
2.2.2 DOM对象转化成jQuery对象
**如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 **
通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了
//通过原生JS的方法获取p元素
var p = document.getElementById('f-color');
// 转化
var $p = $(p);
// 获取第一个p元素
var $first = $p.first();
// 操作
$first.css('color','red');
console.log($first);
如有不足，请大神多指点。
参考：
http://www.jquerycn.cn/a_4561
https://www.runoob.com/
