jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)化實(shí)現(xiàn)代碼
更新時(shí)間:2010年03月02日 13:07:31 作者:
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;
jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
jQuery對(duì)象和DOM對(duì)象
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;
DOM對(duì)象就是Javascript固有的一些對(duì)象操作。DOM對(duì)象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";這里的document.getElementById("img")就是DOM對(duì)象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等價(jià)的,是正確的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是錯(cuò)誤的。
在說一個(gè)例子:就是this,我在寫jQuery的時(shí)候經(jīng)常這樣寫:this.attr("src","test.jpg"); 可是就是出錯(cuò)。其實(shí)this是DOM對(duì)象,而.attr("src","test.jpg") 是jQuery方法,所以出錯(cuò)了。要解決這個(gè)問題就要將DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象,例如$(this).attr("src","test.jpg");
1.DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象:
對(duì)于已經(jīng)是一個(gè)DOM對(duì)象,只需要用$()把DOM對(duì)象包裝起來,就可以獲得一個(gè)jQuery對(duì)象了。$(DOM對(duì)象)
如:var v=document.getElementById("v"); //DOM對(duì)象
var $v=$(v); //jQuery對(duì)象
轉(zhuǎn)換后,就可以任意使用jQuery的方法了。
2.jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象:
兩種轉(zhuǎn)換方式將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象:[index]和.get(index);
(1)jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象,可以通過[index]的方法,來得到相應(yīng)的DOM對(duì)象。
如:var $v =$("#v") ; //jQuery對(duì)象
var v=$v[0]; //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
(2)jQuery本身提供,通過.get(index)方法,得到相應(yīng)的DOM對(duì)象
如:var $v=$("#v"); //jQuery對(duì)象
var v=$v.get(0); //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
jQuery對(duì)象和DOM對(duì)象
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;
DOM對(duì)象就是Javascript固有的一些對(duì)象操作。DOM對(duì)象能使用Javascript固有的方法,但是不能使用jQuery里的方法。例如:document.getElementById("img").src="test.jpg";這里的document.getElementById("img")就是DOM對(duì)象;
$("#img").attr("src","test.jpg"); 和document.getElementById("img").src="test.jpg";是等價(jià)的,是正確的,但是$("#img").src="test.jpg";或者document.getElementById("img").attr("src","test.jpg"); 都是錯(cuò)誤的。
在說一個(gè)例子:就是this,我在寫jQuery的時(shí)候經(jīng)常這樣寫:this.attr("src","test.jpg"); 可是就是出錯(cuò)。其實(shí)this是DOM對(duì)象,而.attr("src","test.jpg") 是jQuery方法,所以出錯(cuò)了。要解決這個(gè)問題就要將DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象,例如$(this).attr("src","test.jpg");
1.DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象:
對(duì)于已經(jīng)是一個(gè)DOM對(duì)象,只需要用$()把DOM對(duì)象包裝起來,就可以獲得一個(gè)jQuery對(duì)象了。$(DOM對(duì)象)
如:var v=document.getElementById("v"); //DOM對(duì)象
var $v=$(v); //jQuery對(duì)象
轉(zhuǎn)換后,就可以任意使用jQuery的方法了。
2.jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象:
兩種轉(zhuǎn)換方式將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象:[index]和.get(index);
(1)jQuery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象,可以通過[index]的方法,來得到相應(yīng)的DOM對(duì)象。
如:var $v =$("#v") ; //jQuery對(duì)象
var v=$v[0]; //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
(2)jQuery本身提供,通過.get(index)方法,得到相應(yīng)的DOM對(duì)象
如:var $v=$("#v"); //jQuery對(duì)象
var v=$v.get(0); //DOM對(duì)象
alert(v.checked) //檢測(cè)這個(gè)checkbox是否被選中
您可能感興趣的文章:
- javascript中html字符串轉(zhuǎn)化為jquery dom對(duì)象的方法
- jQuery如何將選中的對(duì)象轉(zhuǎn)化為原始的DOM對(duì)象
- jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
- jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
- jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
- jquery獲取iframe中的dom對(duì)象(兩種方法)
- jquery入門—訪問DOM對(duì)象方法
- jQuery對(duì)象和DOM對(duì)象使用說明
- JQUERY 對(duì)象與DOM對(duì)象之兩者相互間的轉(zhuǎn)換
- jquery對(duì)象與DOM對(duì)象轉(zhuǎn)化
相關(guān)文章
jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊(cè)特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)彈出層登錄和全屏層注冊(cè)特效,推薦給大家,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08jquery+ajax+C#實(shí)現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery+ajax+C#實(shí)現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,重點(diǎn)是EasyUI創(chuàng)建菜單與按鈕,按鈕分為鏈接按鈕、菜單按鈕、分割按鈕,對(duì)這方面感興趣的小伙伴們可以參考一下2015-11-11jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件,需要的朋友可以參考下2017-02-02jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery前臺(tái)控制ajax交互與后臺(tái)asp.net響應(yīng)處理的詳細(xì)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12