將jQuery物件與DOM物件相互轉換詳解

在說他們之間的轉換之前先說一下他們之間的關係：

Js 是動態的弱型別的語言，是JavaScript 的縮寫，而jQuery 是js的封裝、擴展，jQuery 是使用js封裝的框架，就是讓

jquery更方便簡潔。舉個例子吧，js就好比是生的麵條，而jquery是泡麵，泡一下就可以吃了，比較的方便。

即：jquery是使用最少的程式碼來完成更多的功能。以上是我對js與jquery的差異的理解。

 

例如： $("#img").attr("src","test.jpg"); 這裡的$("#img")就是jQuery 物件；

           document.getElementById("img").src = “test.jpg"；這裡的document.getElementById("img") 就是DOM 物件。

 

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