首頁 > web前端 > js教程 > 主體

jquery物件和DOM物件如何相互轉換實例程式碼詳解

伊谢尔伦
發布: 2017-07-20 10:48:53
原創
1363 人瀏覽過

jQuery 物件是透過 jQuery 包裝DOM 物件後產生的物件。 jQuery 物件是jQuery 獨有的,可以使用jQuery 裡的方法,但不能使用DOM 的方法;例如: $("#img").attr("src","test.jpg"); 這裡的$( "#img")就是jQuery 物件。

DOM物件就是Javascript 固有的一些物件操作。 DOM 物件能使用Javascript 固有的方法,但不能使用 jQuery 裡的方法。例如:document.getElementById("img").src = “test.jpg";這裡的document.getElementById("img") 就是DOM 物件。

$("#img").attr("src","test.jpg"); 和document.getElementById("img").src = "test.jpg"; 是等價的,是正確的,但是$("#img").src = "test.jpg" ;或document.getElementById("img").attr("src","test.jpg"); 都是錯的。

再說一個例子,就是this, 在寫jQuery 時常常這樣寫: this.attr("src","test.jpg");可是就是出錯,其實this 是DOM對象,而.attr( "src","test.jpg") 是jQuery 方法,所以出錯了。要解決這個問題就要將DOM物件轉換成jQuery 對象,例如$(this).attr("src","test.jpg");

1. DOM 物件轉換成jQuery 對象

對於已經是一個DOM 對象,只需要用$() 把DOM對象包裝起來,就可以得到一個jQuery 對象了,$(DOM 對象) 註: var是定義變數

如: 


var v = document.getElementById("v"); //DOM对象
var $v = $(v); //jQuery 对象
登入後複製

轉換後,就可以任意使用jQuery 的方法。

2. jQuery 物件轉成DOM 物件

兩種轉換方式講一個jQuery 物件轉換成DOM 物件: [index] 和.get(index);

(1) jQuery 物件是一個資料對象,可以透過[index] 的方法,來得到對應的DOM 物件。

如:


var $v = $("#v"); //jQuery 对象
var v = $v[0]; //DOM 对象
alert(v.checked); //检测这个checkbox是否被选中
登入後複製

(2) jQuery 本身提供,透過.get(index) 方法得到對應的DOM 物件

#如:


var $v = $("#v"); //jQuery 对象
var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
alert(v.checked); //检测这个 checkbox 是否被选中
登入後複製

透過上述方法,可以任意的相互轉換jQuery 物件和DOM 對象,需要再強調的是: DOM 物件才能使用DOM 中的方法,jQuery 物件是不可以使用DOM中的方法。

以上是jquery物件和DOM物件如何相互轉換實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板