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對象。
更多關(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é)》
希望本文所述對大家jquery程序設(shè)計有所幫助。
- JS/jQuery判斷DOM節(jié)點(diǎn)是否存在的簡單方法
- jQuery利用sort對DOM元素進(jìn)行排序操作
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷
- jQuery遍歷DOM的父級元素、子級元素和同級元素的方法總結(jié)
- 淺談jQuery 選擇器和dom操作
- 使用jQuery監(jiān)聽DOM元素大小變化
- javascript中html字符串轉(zhuǎn)化為jquery dom對象的方法
- JQuery中DOM實現(xiàn)事件移除的方法
- 詳解jQuery中的DOM操作
相關(guān)文章
jQuey將序列化對象在前臺顯示地實現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式,非常不錯,具有參考借鑒價值,需要的朋友一起看看吧2016-12-12jquery中map函數(shù)遍歷數(shù)組用法實例
這篇文章主要介紹了jquery中map函數(shù)遍歷數(shù)組用法,實例分析了jQuery中map函數(shù)遍歷數(shù)組的相關(guān)技巧,并提供了一個自定義遍歷數(shù)組函數(shù)供參考之用,需要的朋友可以參考下2015-05-05