JQuery對象和Dom對象的區別和相互轉化總結

1. 是什麼是DOM對象

        咱們知道每一份HTML結構能夠視做一份DOM結構的節點樹，能夠經過getElementByID()方法和getElementTagName()方法來得到節點元素，經過這兩個函數得到的DOM節點元素稱爲DOM對象

以下：

 var div = document.getElementById("testDiv");   
 var divs = document.getElementsByTagName("div");

div和divs就是DOM對象，可使用Javascript裏面的方法。

注：DOM對象只有有限的屬性和方法

2.  什麼是Jquery對象

        在咱們瞭解jquer對象以前，咱們先了解一個jquery包裝集，jquery包裝集能夠說是DOM的一個擴充，在jquery的世界裏面，不管是一個仍是一組，都包裝成一個包裝集，Jquery包裝集都做爲一個對象一塊兒調用的。

var jQueryObject = $("#testDiv");

jQueryObject對象就是一個jquery對象

注：jquery對象擁有豐富的屬性和方法。

3. DOM對象和JQuery對象使用之間的區別

   DOM對象沒法使用Jquery對象的方法和屬性

document.getElementById("id").html()是錯的 
document.getElementById("id").innerHTML是正確的。

   一樣Jquery對象沒法使用DOM對象裏面的屬性和方法

$（"#id"）.innerHTML是錯的
$（"#id"）.html()是對的

$("#id").checked是錯的
$("#id").attr("checked")是對的

4. 將Dom對象轉化爲jquery對象

  直接用$()方法包裝一些就行，其實就是用Jquery選擇器本身構造，將DOM對象轉化爲jquery對象。

var DomObject=document.getElementById("id");

var JqueryObject=$(DomObject)；         注意：將DOM對象直接構形成JQuery對象，DOM對象不要加引號

5. 將jquery對象轉化爲Dom對象

有兩種方法：

方法一：經過[index]

var DomObject=$("#id")[0];
alert(DomObject.checked);              //檢查這個checkbox是否被選中了

方法二：經過get[index]

var DomObject=$("#id").get[0];
alert(DomObject.checked);             //檢查這個checkbox是否被選中了

注：this指針要注意了，是DOM元素而不是jquery元素

jQuery包裝集的某些遍歷方法,好比each()中, 能夠傳遞遍歷函數, 在遍歷函數中的this也是Dom元素,好比:

$("#testDiv").each(function() { alert(this) })

若是咱們要使用jQuery的方法操做Dom對象,怎麼辦? 用上面介紹過的轉換方法便可:

$("#testDiv").each(function() { $(this).html("修改內容") })