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中文網其他相關文章!