jQuery物件與DOM物件轉換方法詳解_jquery

本文實例分析了jquery物件與dom物件的轉換方法。分享給大家參考，具體如下：

jquery物件轉換為dom物件

只有jquery物件才能呼叫jquery類別函式庫的各種函數，同樣有些dom物件的屬性和方法在jquery上也是無法呼叫的，不過基本上jquery類別函式庫提供的函數包含了所有的dom運算。有時尤其是在初學jquery，無法記住jquery的所有函數時，會有很長一段時間使用jquery選擇器來配合原始的dom函數來開發。所以兩種物件的轉化是很有必要的。

jquery物件的索引保存的是dom對象，所以可以透過索引將經jquery物件轉化為dom對象（實際上是取得保存在jquery物件中的dom對象）。

$("#myphoto")[0];

透過索引傳回dom物件後，就可以使用各種dom物件的方法和屬性，例如取得dom物件的src屬性：

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

如果想要遍歷jquery物件中的每個元素，通常會使用each()函數。

echo(callback);

callback()是一個回呼函數，此函數中的this也指向dom元素。

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

對於懶人有一個小技巧，如果不想記憶在不同的jquery函數中的this到底是jquery對象還是this對象，可以使用"this"方法都轉化成jquery對象，因為即使一個對像已經是jquery對象也不會出錯。

dom物件轉換為jquery物件

如果已經得到了一個dom對象，可以使用"jquery(elements)"函數將其轉換為jquery對象：

var img=document.getelementbyid("myphoto");
jquery(img).css("border","solid 2px #ff0000");

上面程式碼中img是使用dom取得到的dom物件。將其轉換為jquery物件後就可以使用jquery物件的css()方法來變更其樣式。

可以使用"$"來代替"jquery"，因為在jquery的內部有如下實作：

jquery=window.jquery=window.$

"$"字元在javascript中可用做變數名，並且可以作為前綴出現。但是一些其他的類別庫或者程式可能已經使用了"$"作為變數名稱。

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

以上兩條語句是等同的。

"jquery(elements)"函數的elemients參數還可以是jquery對象，雖然講一個jquery對像在次轉化沒有意義，這是為了當不確定一個對象的類型是jquery對象還是dom對象時，可以再呼叫此函數進行轉化，這樣可以保證此物件一定是jquery物件。

更多關於jquery相關內容有興趣的讀者可查看本站專題：《jquery操作dom節點方法總結》、 《jquery常用操作技巧總結》、《jquery常見事件用法與技巧總結》、《jquery操作json資料技巧總結》、《jquery操作xml技巧總結》及《jquery擴充技巧總結 》

希望本文所述對大家jquery程式設計有幫助。