這篇文章主要介紹了jQuery對(duì)象與DOM對(duì)象的轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了jQuery對(duì)象及DOM對(duì)象的作用與二者的相互轉(zhuǎn)換技巧,需要的朋友可以參考下
本文實(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ì)有很長一段時(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ì)象。
希望本文所述對(duì)大家jquery程序設(shè)計(jì)有所幫助。