首頁  >  文章  >  web前端  >  將jQuery物件與DOM物件相互轉換詳解

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

一个新手
一个新手原創
2017-09-06 14:46:361675瀏覽

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

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn