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);
通過JQuery
//獲取對象**$('#f-color');**
var $p = $('#f-color');
//通過調用自身html css 方法進行添加內容和改變顏色
$p.html('Hello . JQurey').css('color','red');
console.log($p);
由控制檯輸出的數據我們也可以很直觀的看出來我們獲取數據不同，通過原生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/