jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為的是提供更好更方便快捷的DOM處理與開發中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用。在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都是可以操作的DOM元素，jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。
如何把jQuery對象轉成DOM對象
利用數組下標的方式讀取到jQuery中的DOM對象
1、我們項目中本來有的id，通過jquery獲取到后需要轉化成dom對象
2、用jQuery找到所有的div元素（3個），因為jQuery對象也是一個數組結構，可以通過數組下標索引找到第一個div元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var $div = $('div'); //jQuery對象 var div = $div[0]; // 轉化成dom對象 div.style.color = 'red'; //操作dom對象的屬性 </script> </body> </html>
通過jQuery自帶的get()方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> </head> <body> <div>元素一</div> <div>元素二</div> <div>元素三</div> <script type="text/javascript"> var $div = $('div'); //jQuery對象 var div = $div.get(0); // 轉化成dom對象 div.style.color = 'red'; //操作dom對象的屬性 </script> </body> </html>