首頁 > web前端 > js教程 > 將jQuery物件與DOM物件相互轉換詳解

將jQuery物件與DOM物件相互轉換詳解

一个新手
發布: 2017-09-06 14:46:36
原創
1712 人瀏覽過

在說他們之間的轉換之前先說一下他們之間的關係:

Js 是動態的弱型別的語言,是JavaScript 的縮寫,而jQuery 是js的封裝、擴展,jQuery 是使用js封裝的框架,就是讓

jquery更方便簡潔。舉個例子吧,js就好比是生的麵條,而jquery是泡麵,泡一下就可以吃了,比較的方便。

即:jquery是使用最少的程式碼來完成更多的功能。以上是我對js與jquery的差異的理解。

 

例如: $("#img").attr("src","test.jpg"); 這裡的$("#img")就是jQuery 物件;

           document.getElementById("img").src = “test.jpg";這裡的document.getElementById("img") 就是DOM 物件。

 

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板