jquery對(duì)象和javascript對(duì)象即DOM對(duì)象相互轉(zhuǎn)換
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是定義變量
如:
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); //檢測這個(gè)checkbox是否被選中
(2) jQuery 本身提供,通過.get(index) 方法得到相應(yīng)的 DOM 對(duì)象
如:
var $v = $("#v"); //jQuery 對(duì)象
var v = $v.get(0); //DOM對(duì)象 ( $v.get()[0] 也可以 )
alert(v.checked); //檢測這個(gè) checkbox 是否被選中
通過以上方法,可以任意的相互轉(zhuǎn)換 jQuery 對(duì)象和 DOM 對(duì)象,需要再強(qiáng)調(diào)的是: DOM 對(duì)象才能使用DOM 中的方法,jQuery 對(duì)象是不可以使用DOM中的方法。
- JavaScript文檔對(duì)象模型DOM
- JavaScript Dom對(duì)象的操作
- JavaScript 中的文檔對(duì)象模型 DOM
- JavaScript變量Dom對(duì)象的所有屬性
- JS實(shí)現(xiàn)訪問DOM對(duì)象指定節(jié)點(diǎn)的方法示例
- 淺談JS讀取DOM對(duì)象(標(biāo)簽)的自定義屬性
- js基礎(chǔ)之DOM中document對(duì)象的常用屬性方法詳解
- js基礎(chǔ)之DOM中元素對(duì)象的屬性方法詳解
- JavaScript實(shí)現(xiàn)DOM對(duì)象選擇器
- JavaScript DOM 對(duì)象深入了解
- JavaScript——DOM操作——Window.document對(duì)象詳解
- js對(duì)象關(guān)系圖 方便dom操作
- javascript DOM對(duì)象的學(xué)習(xí)實(shí)例代碼
- JavaScript操作DOM對(duì)象詳解
相關(guān)文章
jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jquery在啟動(dòng)頁面時(shí),自動(dòng)加載數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇jquery在啟動(dòng)頁面時(shí),自動(dòng)加載數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Jquery UI震動(dòng)效果實(shí)現(xiàn)原理及步驟
如果你想你的博客頁面某些部分引起讀者的注意,你可以使這些部分震動(dòng),如廣告等等,今天這篇文章將介紹怎樣使你的頁面中的元素震動(dòng)起來,感興趣的你可不要錯(cuò)過了哦,或許對(duì)你學(xué)習(xí)jquery ui 有所幫助2013-02-02
jQuery獲取動(dòng)態(tài)添加元素的方法詳解
這篇文章主要介紹了jQuery獲取動(dòng)態(tài)添加元素的方法詳解,jQuery 是一個(gè)高效、精簡并且功能豐富的 JavaScript 工具庫,它提供的 API 易于使用且兼容眾多瀏覽器,這讓諸如 HTML 文檔遍歷和操作、事件處理、動(dòng)畫和 Ajax 操作更加簡單,需要的朋友可以參考下2023-08-08
Jquery寫一個(gè)鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)原理與代碼
近日項(xiàng)目中要做一個(gè)鼠標(biāo)拖拽層的效果,于是手動(dòng)使用Jquery做了一個(gè),發(fā)出來跟大伙兒分享一下,并希望能得到高手的指點(diǎn),如何有高手改進(jìn)的話,在下不勝感激2012-12-12
jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
多行滾動(dòng)jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放/滑出時(shí)開始自動(dòng)播放以及判斷執(zhí)行橫向或縱向滾動(dòng),感興趣的朋友可以了解下哦2013-01-01

