js原生dom對象和jQuery對象能夠混合使用嗎？

寫在前面：

本文主要內容包括js原生dom對象和jQuery對象的區別，聯繫，相互轉換，以及踩坑經歷。狀況是這樣的，今天在實現一個js驗證碼的功能，須要獲取input的值，而後我用jQuery的方法獲取到了dom節點，而後用原生js獲取input的值，結果就出錯了，好在後來場外求助啓宸歐巴在師兄的幫助下發現問題所在，併成功解決。將今天的踩坑經歷，以及網上查閱的資料，集合成一篇文章，分享一波。

Dom原生對象和jQuery對象的區別：

1.jquery選擇器獲得的jquery對象和標準的 javascript中的document.getElementById()取得的dom對象是兩種不一樣的對象類型，二者不等價；

注：js原生獲取的dom是一個對象，jQuery對象就是一個數組對象，其實就是選擇出來元素的數組集合。因此說他們二者是不一樣的對象類型不等價。

2.jQuery沒法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裏的方法. 亂使用會報錯。

例如（文章下面有兩個踩坑經歷。）：

　　$("#id").html();
　　document.getElementById("id").innerHTML;
　　意思是指：獲取ID爲id的元素內的html代碼。這兩段代碼結果相同，但中間的取值過程不一樣。
　　即：$("#id").innerHTML、document.getElementById("id").html()之類的寫法都是錯誤的。

注：jQuery是從js衍生出來的，師出同源，可是jQuery是通過一系列操做以後，將其封裝成了一個個不一樣的方法，學習jQuery開始就應當樹立正確的觀念，分清jQuery對象和DOM對象之間的區別，以後學習 jQuery就會輕鬆不少的。

---

js-dom對象和jQuery對象相互轉換：

　　jQuery對象轉成DOM對象---兩種轉換方式：[index]和.get(index)
　　
　　一、jQuery對象是一個數據對象，經過[index]的方法（就是經過下標索引尋找dom，進行操做）
　　如：var $v = $("#v") ; //jQuery對象
　　var v = $v[0]; //DOM對象
　　alert(v.checked) //檢測這個checkbox是否被選中
　　二、jQuery自己提供，經過.get(index)方法
　　如：var $v = $("#v"); //jQuery對象
　　var v = $v.get(0); //DOM對象
　　alert(v.checked) //檢測這個checkbox是否被選中
　　
　　注：其實二者都是同一個道理，即經過索引下標的方式，來尋找dom進行轉換。

　　 DOM對象轉成jQuery對象:
　　對於DOM對象，只需用$()把DOM對象包裝起來，就可獲得jQuery對象
　　如：var v=document.getElementById("v"); //DOM對象
　　var $v=$(v); //jQuery對象

踩坑經歷：

今天出錯的問題：

出錯代碼：

var randomCode=$("#js5-authCode").value;//用jq獲取dom，用js獲取值。
//console的時候，這裏會出現undefined。複製代碼

正確的應該：

var randomCode=$("#js5-authCode").val();//這裏的val()是jq的一種方法。複製代碼

再舉個栗子：

$("#id").innerHTML）、document.getElementById("id").html()。

出錯點：第一個是用jq獲取dom，而後用js操做。第二個是用js獲取dom，而後用jq進行操做

---

總結

框架之類的東西都是封裝好了的一個個函數，中間會經歷一些操做，中間的取值過程也是不一樣，因此咱們寫代碼的時候儘可能使用同一種方式來寫，不能混合使用，大概就是醬樣子。

參考資料：
Js - Dom原生對象和jQuery對象的聯繫、區別、相互轉換
DOM對象與jQuery對象的理解與分析

最後：但願看完的朋友點個喜歡，也能夠關注一下我，如今這階段基本上每月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支持，感激涕零！
ps：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。

以上。2017.4.13