jquery物件和javascript物件即DOM物件相互轉換_jquery

jQuery 物件是透過 jQuery 包裝DOM 物件後產生的物件。 jQuery 物件是jQuery 獨有的，可以使用jQuery 裡的方法，但是不能使用DOM 的方法；例如： $("#img").attr("src","test.jpg"); 這裡的$( "#img")就是jQuery 物件。

DOM物件就是Javascript 固有的一些物件操作。 DOM 物件能使用Javascript 固有的方法，但不能使用 jQuery 裡的方法。例如：document.getElementById("img").src = “test.jpg"；這裡的document.getElementById("img") 就是DOM 物件。

$("#img").attr("src","test.jpg"); 和document.getElementById("img").src = "test.jpg"; 是等價的，是正確的，但是$("#img").src = "test.jpg" ；或document.getElementById("img").attr("src","test.jpg"); 都是錯的。

再說一個例子，就是this, 在寫jQuery 時常常這樣寫： this.attr("src","test.jpg")；可是就是出錯，其實this 是DOM對象，而.attr("src" ,"test.jpg") 是jQuery 方法，所以出錯了。要解決這個問題就要將 DOM物件轉換成 jQuery 對象，例如 $(this).attr("src","test.jpg");

1. DOM 物件轉成 jQuery 物件

對於已經是 DOM 對象，只需要用 $() 把DOM對象包裝起來，就可以得到一個 jQuery 對象了，$(DOM 對象) 註： var是定義變數

如：　

var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象

轉換後，就可以任意使用 jQuery 的方法。

2. jQuery 物件轉成 DOM 物件

兩種轉換方式講一個 jQuery 物件轉換成 DOM 物件： [index] 和 .get(index);

(1) jQuery 物件是一個資料對象，可以透過 [index] 的方法，來得到對應的 DOM 物件。

如：

var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中

(2) jQuery 本身提供，透過.get(index) 方法得到對應的 DOM 物件

如：

var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中

透過上述方法，可以任意的相互轉換 jQuery 物件和 DOM 對象，需要再強調的是： DOM 物件才能使用DOM 中的方法，jQuery 物件是不可以使用DOM中的方法。