jquery物件和DOM物件如何相互轉換實例程式碼詳解

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中的方法。

以上是jquery物件和DOM物件如何相互轉換實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！