jQuery庫本質上還是JavaScript程式碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生程式碼一起使用。通過jQuery生成的物件是一個做了包裝處理的物件，如果要用jQuery物件自己的方法，就需要滿足這個物件是通過jQuery生成的。 在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都是操作的DOM元素，jQuery是一個類陣列物件，DOM物件就是一個單獨的DOM元素。

如何把jQuery物件轉成DOM物件？

利用陣列下標的方式讀取到jQuery中的DOM物件

HTML程式碼

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript程式碼

var $div = $('div') //jQuery物件
var div = $div[0] //轉化成DOM物件
div.style.color = 'red' //操作dom物件的屬性

用jQuery找到所有的div元素（3個），因為jQuery 物件也是一個數組結構，可以通過陣列下標索引找到第一個div元素，通過返回的div物件然後呼叫它style屬性然修改第一個div元素的顏色。這裡需要注意的一點是，陣列的索引是從0開始的，也就是第一個元素下標是0

通過jQuery自帶的get()方法

jQuery物件自身提供一個.get() 方法允許我們直接訪問jQuery物件中相關的DOM節點，get方法中提供一個元素的索引：

var $div = $('div') //jQuery物件
var div = $div.get(0) //通過get方法，轉化成DOM物件
div.style.color = 'red' //操作dom物件的屬性

其實我們翻開原始碼，看看就知道了，get方法就是利用的第一種方式處理的，只是包裝成一個get讓開發者更直接方便的使用。

2.DOM物件轉化成jQuery物件

相比較jQuery轉化成DOM，開發中更多的情況是把一個dom物件加工成jQuery物件。$(引數)是一個多功能的方法，通過傳遞不同的引數而產生不同的作用。

如果傳遞給$(DOM)函式的引數是一個DOM物件，jQuery方法會把這個DOM物件給包裝成一個新的jQuery物件

通過$(dom)方法將普通的dom物件加工成jQuery物件之後，我們就可以呼叫jQuery的方法了

HTML程式碼

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript程式碼

var div = document.getElementsByTagName('div'); //dom物件
var $div = $(div); //jQuery物件
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設定顏色

通過getElementsByTagName獲取到所有div節點的元素，結果是一個dom合集物件，不過這個物件是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery物件，通過呼叫jQuery物件中的first與css方法查詢第一個元素並且改變其顏色。