1. 程式人生 > >JQuery物件和DOM物件的區別

JQuery物件和DOM物件的區別

初學jQuery,會對jQuery物件和DOM物件心存很大的疑惑,因此有必要明白他們之間的區別和聯絡。

DOM物件是我們用傳統的方法(javascript)獲得的物件,jQuery物件就是用jQuery的類庫選擇器獲得的物件。JQuery物件就是通過jQuery包裝DOM物件後產生的物件。JQuery物件是jQuery獨有的,其可以使用jQuery裡的方法,但是不能使用DOM的方法;

例如:

$("#color").html();//獲取id為color的元素內的html程式碼,html()是jQuery特有的方法;
它等同於:
document.getElementById("color").innerHTML;

DOM物件就是javascript固有的一些物件。DOM物件能使用javascript固有的方法,但是不能使用jQuery裡面的方法。

例如$("#id").innerHTML 和$("#id").checked之類的寫法都是錯誤的,可以用$("#id").html()和$("#id").attr("checked")之類的 jQuery方法來代替。

var domObj =document.getElementById("id"); //DOM物件
var $obj =$("#id"); //jQuery物件;

jQuery物件和DOM物件的相互轉換

jQuery物件轉換成DOM物件

jquery提供了兩種方法將一個jquery物件轉換成一個dom物件,即[index]和get(index)。可能有人會覺得奇怪,怎麼是用下標呢,沒錯,jquery物件就是一個數組物件.
下面程式碼將演示一個jquery物件轉換成dom物件,再使用dom物件的方法

程式碼如下:

var$cr=$("#cr"); //jquery物件
var cr = $cr[0]; //dom物件 也可寫成 var cr=$cr.get(0);
alert(cr.checked); //檢測這個checkbox是否給選中

dom物件轉換成jquery物件
對於一個dom物件,只需要用$()把dom物件包裝起來,就可以獲得一個jquery物件了,方法為$(dom物件);
複製程式碼 程式碼如下:

varcr=document.getElementById("cr"); //dom物件
var $cr = $(cr); //轉換成jquery物件

轉換後可以任意使用jquery中的方法了.