JQuery對(duì)象和DOM對(duì)象的區(qū)別

一直以來對(duì)于通過jQuery方式獲取的對(duì)象使不能直接使用JavaScript的一些方法的，開始的時(shí)候不理解，現(xiàn)在此案知道，原來jQuery

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)安徽,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

獲得的對(duì)象并不和我們平時(shí)使用getElementById獲得的對(duì)象是一樣的對(duì)象。所以一些新手就很迷惑，為什么${”#Element”}不能直接

innerHTML，這就是原因所在，解決方式請(qǐng)看下文。

jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換

只有jquery對(duì)象才能使用jquery定義的方法。注意dom對(duì)象和jquery對(duì)象是有區(qū)別的，調(diào)用方法時(shí)要注意操作的是dom對(duì)象還是jquery對(duì)象。

普通的dom對(duì)象一般可以通過$()轉(zhuǎn)換成jquery對(duì)象。

如：

$(document.getElementById("msg"))

則為jquery對(duì)象，可以使用jquery的方法。

由于jquery對(duì)象本身是一個(gè)集合。所以如果jquery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng)，一般可通過索引取出。

如：

$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

這些都是dom對(duì)象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下幾種寫法都是正確的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

jQuery查找對(duì)象是按照標(biāo)準(zhǔn)的dom層級(jí)關(guān)系來查找的

如table中無論你是否有tbody，在查找子對(duì)象的時(shí)候都要按照table--tbody--tr的層級(jí)關(guān)系來查找

關(guān)于this

input name="testThis" type="text" onchange="textThis(this)" /

function textThis(obj)

{

//在引用自己用的this是dom對(duì)象

alert($(obj).val());

}

該this為dom對(duì)象

innerHTML和outerHTML

innerHTML設(shè)置或獲取對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的HTML

outerHTML設(shè)置或獲取對(duì)象及其內(nèi)容的HTML形式

“JQuery對(duì)象”和“DOM對(duì)象”的區(qū)別？

1.jQuery對(duì)象和DOM對(duì)象

第一次學(xué)習(xí)jQuery,經(jīng)常分辨不清哪些是jQuery對(duì)象，哪些是 DOM對(duì)象，因此需要重點(diǎn)了解jQuery對(duì)象和DOM對(duì)象以及它們之間的關(guān)系.

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

復(fù)制代碼 代碼如下:

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

var $obj = $("#id"); //jQuery對(duì)象;

jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，它是jQuery獨(dú)有的。如果一個(gè)對(duì)象是

jQuery對(duì)象，那么就可以使用jQuery里的方法，例:

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

上面的那段代碼等同于:

document.getElementById("foo").innerHTML;

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

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

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

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

在上面第一點(diǎn)說了，jquery對(duì)象和dom對(duì)象是不一樣的！比如jquery對(duì)象不能使用dom的方法，dom對(duì)象不能使用jquery方法，那假如我 jquery沒有封裝我要的方法，那能怎么辦呢？

這時(shí)我們可以將jquer對(duì)象轉(zhuǎn)換成dom對(duì)象

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

jquery提供了兩種方法將一個(gè)jquery對(duì)象轉(zhuǎn)換成一個(gè)dom對(duì)象，即[index]和get(index)?？赡苡腥藭?huì)覺得奇怪，怎么是用下標(biāo)呢，沒錯(cuò)，jquery對(duì)象就是一個(gè)數(shù)組對(duì)象.

下面代碼將演示一個(gè)jquery對(duì)象轉(zhuǎn)換成dom對(duì)象，再使用dom對(duì)象的方法

復(fù)制代碼 代碼如下:

var $cr=$("#cr"); //jquery對(duì)象

var cr = $cr[0]; //dom對(duì)象 也可寫成 var cr=$cr.get(0);

alert(cr.checked); //檢測這個(gè)checkbox是否給選中

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

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

復(fù)制代碼 代碼如下:

var cr=document.getElementById("cr"); //dom對(duì)象

var $cr = $(cr); //轉(zhuǎn)換成jquery對(duì)象

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

通過以上的方法，可以任意的相互轉(zhuǎn)換jquery對(duì)象和dom對(duì)象.

如何將jquery對(duì)象轉(zhuǎn)換成dom對(duì)象

jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象：

兩種轉(zhuǎn)換方式將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：[index]和.get(index);

(1)jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象，可以通過[index]的方法，來得到相應(yīng)的DOM對(duì)象。

如：var $v =$("#v") ; //jQuery對(duì)象

var v=$v[0]; //DOM對(duì)象

alert(v.checked) //檢測這個(gè)checkbox是否被選中

(2)jQuery本身提供，通過.get(index)方法，得到相應(yīng)的DOM對(duì)象

如：var $v=$("#v"); //jQuery對(duì)象

var v=$v.get(0); //DOM對(duì)象

alert(v.checked) //檢測這個(gè)checkbox是否被選中

望采納！

jquery對(duì)象和dom對(duì)象的區(qū)別

jQuery對(duì)象不能使用DOM中的方法，但是如果對(duì)jQuery對(duì)象所提供的方法不熟悉，或者jQuery沒有封裝想要的方法，不得不實(shí)用DOM對(duì)象的時(shí)候，有以下兩種處理方法。jQuery提供了兩種方法將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOm對(duì)象，即[index]和get(index).

1、jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過[index]的方法得到相應(yīng)的DOM對(duì)象。

var $cr = $("#cr"); //jQuery對(duì)象

var cr = $cr[0] //DOM對(duì)象

alert(cr.checked) //檢測這個(gè)checkbox是否選中了

2、通過get(index)方法得到相應(yīng)的DOM對(duì)象。

var $cr = $("#cr");

var cr = $cr.get(0);

alert(cr.checked);

對(duì)于一個(gè)DOM對(duì)象，只需要用$()把DOM對(duì)象包裝起來，就可以獲得一個(gè)jQuery對(duì)象了，方式為$(DOM對(duì)象)。

var cr = document.getElementByID("cr"); //DOM對(duì)象

var $cr = $(cr);

在此總結(jié)說明：

jQuery方法里的get方法事實(shí)上是獲得Dom元素（$(this).get(0)與$(this)[0]）

而jQuery方法里的eq、first、last等方法都是返回的Jquery對(duì)象

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