jQuery物件和DOM物件之間的區別以及轉換方法

• 在實現<script>標籤中的程式碼內容的時候，經常都會使用DOM物件和jQuery物件。當實現的物件多的時候就容易搞混，這裡做一下總結

• jQuery物件是包裝DOM物件後產生的，但是它們之間並不能混用！DOM物件只能使用DOM方法，jQuery物件只能使用jQuery方法

• 專業建議：在jQuery物件的變數名前新增$符號，便於區別

DOM物件轉換為jQuery物件

• 對一個DOM物件，使用$( )對其進行包裝即可得到jQuery物件

• 例如：

var header = document.getElementById("content"); //DOM物件
var $header = $(header); //轉換成jQuery物件

• 轉換成jQuery物件後，就能夠盡情地使用jQuery的各種方法了

jQuery物件轉換為DOM物件

• (1)其實可以把jQuery物件當作一個“類陣列物件”，因為能夠使用[index]方法得到對應的DOM物件，例如：

var $content = $("#content"); //得到jQuery物件
var content = $content[0]; //對應的DOM物件
 

• (2)jQuery還提供了get(index)方法來獲得對應的DOM物件，例如：

var $content = $("#content"); //得到jQuery物件
var content = $content.get(0); //對應的DOM物件

下面幾種方法都是正確的，經過比較會熟悉掌握它們之間的區別

$("#div").html();

$("#div")[0].innerTHML;

$("#div").eq(0)[0].innerHTML;

$("#div").get(0).innerHTML;

$(document.getElementById("div")
 
).html()