前言

通過(guò)問(wèn)題看本質(zhì)：
舉例：
js的寫(xiě)法:document.getElementById('save').disabled=true;
在jquery中我是這樣寫(xiě)的

$("#save").disabled = true; //沒(méi)有效果

分析：
其實(shí)因?yàn)?("#save")出來(lái)的其實(shí)是jQuery對(duì)象，而不是普通DOM對(duì)象
解決方法：
1）用JQ寫(xiě)法

$("#save").attr("disabled","true");

2）轉(zhuǎn)成DOM寫(xiě)法

$("#save")[0].disabled=true; 當(dāng)然，$("#save")[0]也可以寫(xiě)成$("#save").get(0)。他返回的也是DOM元素。 $("#save").eq(0)得到的還是jq對(duì)象，$(dom對(duì)象)就能得到一個(gè)jq對(duì)象。

一、Dom對(duì)象、JavaScript對(duì)象、jQuery對(duì)象

1.1 Dom對(duì)象

文檔對(duì)象模型簡(jiǎn)稱DOM，是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。

• DOM實(shí)際上是以面向?qū)ο蠓绞矫枋龅奈臋n模型。DOM定義了表示和修改文檔所需的對(duì)象、
  這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。
• 通過(guò)DOM，可以訪問(wèn)所有的 HTML 元素，連同它們所包含的文本和屬性。可以對(duì)其中的
  內(nèi)容進(jìn)行修改和刪除，同時(shí)也可以創(chuàng)建新的元素。
• DOM 獨(dú)立于平臺(tái)和編程語(yǔ)言。它可被任何編程語(yǔ)言諸如 Java、JavaScript 和
  VBScript 使用。
• DOM對(duì)象，即是我們用傳統(tǒng)的方法(javascript)獲得的對(duì)象。
• DOM準(zhǔn)確說(shuō)是對(duì)文檔對(duì)象的一種規(guī)范標(biāo)準(zhǔn)(文檔對(duì)象模型),標(biāo)準(zhǔn)只定義了屬性和方法行為。

1.2 JavaScript對(duì)象

• JavaScript 提供多個(gè)內(nèi)建對(duì)象，比如 String、Date、Array 等等。
• 對(duì)象只是帶有屬性和方法的特殊數(shù)據(jù)類型。
• 通過(guò)js獲取的DOM對(duì)象就是js對(duì)象
• 當(dāng)瀏覽器支持js的dom接口(api)時(shí)，這里狹義的dom對(duì)象是以js對(duì)象的形式出現(xiàn)的，
  也就是一個(gè)js對(duì)象。

1.3 jQuery對(duì)象

1）概述
jQuery對(duì)象其實(shí)是一個(gè)JavaScript的數(shù)組,這個(gè)數(shù)組對(duì)象包含125個(gè)方法和4個(gè)屬性
4個(gè)屬性分別是：

• jquery 當(dāng)前的jquery框架版本號(hào)
• length 指示該數(shù)組對(duì)象的元素個(gè)數(shù) .
• context 一般情況下都是指向HtmlDocument對(duì)象 .
• selector 傳遞進(jìn)來(lái)的選擇器內(nèi)容

jquery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，
其可以使用jQuery里的方法，但是不能使用DOM的方法;反過(guò)來(lái)Dom對(duì)象也不能使用
jquery的方法。
2）jQuery對(duì)象和js對(duì)象區(qū)別

• jQuery對(duì)象屬于js的數(shù)組
• jQuery對(duì)象是通過(guò)jQuery包裝的DOM對(duì)象后產(chǎn)生的
• jQuery對(duì)象不能使用DOM對(duì)象的方法和屬性
• DOM對(duì)象不能使用jQuery對(duì)象的方法和屬性

3）jQuery對(duì)象和js對(duì)象之間的相互轉(zhuǎn)換

• js轉(zhuǎn)jQuery對(duì)象
  $(js對(duì)象)
• jQuery對(duì)象轉(zhuǎn)js對(duì)象
  

var doc2=$("#idDoc2")[0]; //轉(zhuǎn)換jQuery對(duì)象為DOM對(duì)象 doc2.innerHTML="這是jQuery的第一個(gè)DOM對(duì)象" //使用jQuery對(duì)象本身提供的get函數(shù)來(lái)返回指定集合位置的DOM對(duì)象 var doc2=$("#idDoc2").get(0); doc2.innerHTML="這是jQuery的第二個(gè)DOM對(duì)象"

二、細(xì)說(shuō)jQuery對(duì)象和DOM對(duì)象的區(qū)別與使用

2.1 jQuery對(duì)象和DOM對(duì)象

DOM對(duì)象，即是我們用傳統(tǒng)的方法(javascript)獲得的對(duì)象，jQuery對(duì)象即是用
jQuery類庫(kù)的選擇器獲得的對(duì)象。

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

jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，它是jQuery獨(dú)有的。
如果一個(gè)對(duì)象是jQuery對(duì)象，那么就可以使用jQuery里的方法。

$("#foo").html(); //獲取id為foo的元素內(nèi)的html代碼，html()是jQuery特有的方法

等同于js中：

document.getElementById("foo").innerHTML;

注意：在jQuery對(duì)象中無(wú)法使用DOM對(duì)象的任何方法。
例如:

$("#id").innerHTML 和$("#id").checked之類的寫(xiě)法都是錯(cuò)誤的

可以用

$("#id").html()和$("#id").attr ("checked")之類的 jQuery方法來(lái)代替。

同樣，DOM對(duì)象也不能使用jQuery方法。學(xué)習(xí)jQuery開(kāi)始就應(yīng)當(dāng)樹(shù)立正確的觀念，
分清jQuery對(duì)象和DOM對(duì)象之間的區(qū)別，之后學(xué)習(xí) jQuery就會(huì)輕松很多的。

2.2 jQuery對(duì)象和DOM對(duì)象的互相轉(zhuǎn)換

2.2.1 jquery對(duì)象轉(zhuǎn)換成dom對(duì)象

jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象，即[index]和get(index)。
可能有人會(huì)覺(jué)得奇怪，怎么是用下標(biāo)呢，沒(méi)錯(cuò)，jquery對(duì)象就是一個(gè)數(shù)組對(duì)象。
舉例：

var $cr=$("#cr"); //jquery對(duì)象 var cr = $cr[0]; //dom對(duì)象 也可寫(xiě)成 var cr=$cr.get(0); alert(cr.checked); //檢測(cè)這個(gè)checkbox是否給選中

2.2.2 dom對(duì)象轉(zhuǎn)換成jquery對(duì)象

對(duì)于一個(gè)dom對(duì)象，只需要用$()把dom對(duì)象包裝起來(lái)，就可以獲得一個(gè)jquery對(duì)象了，
方法為$(dom對(duì)象);
舉例：

var cr=document.getElementById("cr"); //dom對(duì)象 var $cr = $(cr); //轉(zhuǎn)換成jquery對(duì)象

轉(zhuǎn)換后可以任意使用jquery中的方法了。

三、總結(jié)一下

dom對(duì)象才能使用dom中的方法，jquery對(duì)象不可以使用dom中的方法，但 jquery對(duì)象提供
了一套更加完善的工具用于操作dom。

平時(shí)用到的jquery對(duì)象都是通過(guò)$()函數(shù)制造出來(lái)的，$()函數(shù)就是一個(gè)jquery對(duì)象的制造工廠。

注意：
如果獲取的對(duì)象是 jquery對(duì)象，那么在變量前面加上$,這樣方便容易識(shí)別出哪些是jquery對(duì)象。
舉例：

var $variable = jquery對(duì)象;

如果獲取的是dom對(duì)象，則定義如下:

var variable = dom對(duì)象

總結(jié)

以上是生活随笔為你收集整理的JS对象与Dom对象与jQuery对象之间的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。