這篇文章主要介紹了jQuery對象與DOM對象的轉(zhuǎn)換方法,結(jié)合實例形式分析了jQuery對象及DOM對象的作用與二者的相互轉(zhuǎn)換技巧,需要的朋友可以參考下

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

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

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

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

$("#myphoto")[0];

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

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

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

echo(callback);

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

$("#myphoto").each(function(i){

     this,src="test"+i+".jpg";

});

對于懶人有一個小竅門，如果不想記憶在不同的jQuery函數(shù)中的this到底是jQuery對象還是this對象，可以使用"this"方法都轉(zhuǎn)化成jQuery對象，因為即使一個對象已經(jīng)是jQuery對象也不會出錯。

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

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

var img=document.getElementById("myphoto");

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

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

可以使用"$"代替"jQuery"，因為在jQuery的內(nèi)部有如下實現(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對象，雖然講一個jQuery對象在次轉(zhuǎn)化沒有意義，這是為了當(dāng)不確定一個對象的類型是jQuery對象還是dom對象時，可以再次調(diào)用此函數(shù)進(jìn)行轉(zhuǎn)化，這樣可以保證此對象一定是jQuery對象。

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