jquery物件與dom物件的差異有哪些？

區別：jQuery物件是使用jQuery類別函式庫的選擇器所獲得的對象，它是jQuery獨有的，可以使用jQuery裡的方法，但無法使用DOM物件的任何方法；DOM物件是使用javascript方法獲得的對象，DOM對像不能使用jQuery方法。

相關推薦：《jQuery影片教學》

一、Dom物件、jQuery物件

1.1 Dom物件

##文件物件模型簡稱DOM，是W3C組織推薦的處理可擴充置標語言的標準程式介面。

DOM其實是以物件導向方式描述的文檔模型。 DOM定義了表示和修改文件所需的物件、這些物件的行為和屬性以及這些物件之間的關係。
• 透過DOM，可以存取所有的 HTML 元素，連同它們所包含的文字和屬性。可以對其中的內容進行修改和刪除，同時也可以建立新的元素。
• DOM 獨立於平台和程式語言。它可被任何程式語言諸如 Java、JavaScript 和 VBScript 使用。
• DOM對象，也就是我們用傳統的方法(javascript)所獲得的物件。
• DOM準確地說是對文檔物件的一種規範標準(文檔物件模型),標準只定義了屬性和方法行為。

1.2 jQuery物件

1）概述

jQuery物件其實是一個JavaScript的陣列,這個陣列物件包含125個方法和4個屬性

4個屬性分別是：

jquery 目前的jquery框架版本號
• length 指示該陣列物件的元素個數.
context 一般情況下都是指向HtmlDocument物件.
• selector 傳遞進來的選擇器內容

jquery物件就是透過jQuery包裝DOM物件後產生的物件。 jQuery物件是jQuery獨有的，其可以使用jQuery裡的方法，但是不能使用DOM的方法；反過來Dom物件也不能使用jquery的方法。

2）jQuery物件與js物件區別

jQuery物件屬於js的陣列
• jQuery物件是透過jQuery包裝的DOM物件後產生的
jQuery物件不能使用DOM物件的方法和屬性
• DOM物件不能使用jQuery物件的方法和屬性

3）jQuery物件和js物件之間的相互轉換

js轉jQuery物件$(js物件)
• jQuery物件轉js物件

var doc2=$("#idDoc2")[0];   //转换jQuery对象为DOM对象  
doc2.innerHTML="这是jQuery的第一个DOM对象"  
  //使用jQuery对象本身提供的get函数来返回指定集合位置的DOM对象  
var doc2=$("#idDoc2").get(0);  
doc2.innerHTML="这是jQuery的第二个DOM对象"

二、細說jQuery物件和DOM對象的區別與使用

2.1 jQuery對象和DOM對象

DOM對象，即是我們用傳統的方法(javascript)獲得的對象，jQuery物件即是用jQuery類別庫的選擇器所獲得的物件。

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

jQuery物件就是透過jQuery包裝DOM物件後產生的對象，它是jQuery獨有的。如果一個物件是jQuery對象，那麼就可以使用jQuery裡的方法。

$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法

等同於js中：

document.getElementById("foo").innerHTML;

注意：在jQuery物件中無法使用DOM物件的任何方法。

例如:

$("#id").innerHTML 和$("#id").checked之类的写法都是错误的

可以用

$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。

同樣，DOM物件也不能使用jQuery方法。學習jQuery開始就應樹立正確的觀念，分辨jQuery物件和DOM物件之間的區別，之後學習 jQuery就會輕鬆很多的。

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

#2.2.1 jquery物件轉換成dom物件

jquery提供了兩種方法將一個jquery物件轉換成一個dom對象，即[index]和get(index)。

可能有人會覺得奇怪，怎麼是用下標呢，沒錯，jquery物件就是一個陣列物件。
範例：

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

2.2.2 dom物件轉換成jquery物件

對於一個dom對象，只需要用$()把dom物件包裝起來，就可以得到一個jquery物件了，

方法為$(dom物件);
舉例：

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

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

三、總結一下

dom物件才能使用dom中的方法，jquery物件不可以使用dom中的方法，但jquery物件提供了一套更加完善的工具用於操作dom。

平常用到的jquery物件都是透過$()函數製造出來的，$()函數就是一個jquery物件的製造工廠。

注意：

如果取得的物件是 jquery對象，那麼在變數前面加上$,這樣方便容易辨識出哪些是jquery物件。

範例：

var $variable = jquery对象;

如果取得的是dom對象，則定義如下:

var variable = dom对象

更多程式相關知識，請造訪：

程式設計影片 ！ ！

以上是jquery物件與dom物件的差異有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！