本文實(shí)例分析了jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換方法。分享給大家供大家參考，具體如下：

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

只有jQuery對(duì)象才能調(diào)用jQuery類庫的各種函數(shù)，同樣有些dom對(duì)象的屬性和方法在jQuery上也是無法調(diào)用的，不過基本上jQuery類庫提供的函數(shù)包含了所有的dom操作。有時(shí)尤其是在初學(xué)jQuery，無法記住jQuery的所有函數(shù)時(shí)，會(huì)有很長(zhǎng)一段時(shí)間使用jQuery選擇器配合原始的dom函數(shù)進(jìn)行開發(fā)。所以兩種對(duì)象的轉(zhuǎn)化是很有必要的。

jQuery對(duì)象的索引保存的是dom對(duì)象，所以可以通過索引將經(jīng)jQuery對(duì)象轉(zhuǎn)化為dom對(duì)象（實(shí)際上是獲取保存在jQuery對(duì)象中的dom對(duì)象）。

$("#myphoto")[0];

通過索引返回dom對(duì)象后，就可以使用各種dom對(duì)象的方法和屬性，比如獲取dom對(duì)象的src屬性：

alert($("#myphoto")[0].src);

如果想要遍歷jQuery對(duì)象中的每個(gè)元素，通常使用each()函數(shù)。

echo(callback);

Callback()是一個(gè)回調(diào)函數(shù)，此函數(shù)中的this也指向dom元素。

$("#myphoto").each(function(i){
     this,src="test"+i+".jpg";
});

對(duì)于懶人有一個(gè)小竅門，如果不想記憶在不同的jQuery函數(shù)中的this到底是jQuery對(duì)象還是this對(duì)象，可以使用"this"方法都轉(zhuǎn)化成jQuery對(duì)象，因?yàn)榧词挂粋€(gè)對(duì)象已經(jīng)是jQuery對(duì)象也不會(huì)出錯(cuò)。

Dom對(duì)象轉(zhuǎn)化為jQuery對(duì)象

如果已經(jīng)獲得了一個(gè)dom對(duì)象，可以使用"jQuery(elements)"函數(shù)將其轉(zhuǎn)化為jQuery對(duì)象：

var img=document.getElementById("myphoto");
jQuery(img).css("border","solid 2px #FF0000");

上面代碼中img是使用dom獲取到的dom對(duì)象。將其轉(zhuǎn)化為jQuery對(duì)象后就可以使用jQuery對(duì)象的css()方法更改其樣式。

可以使用"$"代替"jQuery"，因?yàn)樵趈Query的內(nèi)部有如下實(shí)現(xiàn)：

jQuery=window.jQuery=window.$

"$"字符在JavaScript中可用做變量名，并且可以作為前綴出現(xiàn)。但是一些其他的類庫或者是程序可能已經(jīng)使用了"$"作為變量名。

jQuery(img).css("border","solid 2px #FF0000");
$(img). css("border","solid 2px #FF0000");

以上兩條語句是等同的。

"jQuery(elements)"函數(shù)的elemients參數(shù)還可以是jQuery對(duì)象，雖然講一個(gè)jQuery對(duì)象在次轉(zhuǎn)化沒有意義，這是為了當(dāng)不確定一個(gè)對(duì)象的類型是jQuery對(duì)象還是dom對(duì)象時(shí)，可以再次調(diào)用此函數(shù)進(jìn)行轉(zhuǎn)化，這樣可以保證此對(duì)象一定是jQuery對(duì)象。

更多關(guān)于jquery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jquery常用操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery操作xml技巧總結(jié)》及《jQuery擴(kuò)展技巧總結(jié)》

希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。

最新評(píng)論