1. 程式人生 > >jquery物件與dom物件相互轉換

jquery物件與dom物件相互轉換

通過jquery選擇器所獲取的元素物件和通過HTML DOM的getElementById等查詢元素方法所獲取的元素物件是兩種不同的物件,通過jquery選擇器所獲取的元素物件是jquery物件,不能使用DOM的方法,而通過HTML DOM的getElementById等查詢元素方法所獲取的元素物件是DOM物件,也不能使用jquery的方法。

比如$("#myid")所獲取的就是jquery物件,如果要想獲取其中的內容,就可以用jquery方法來獲取:$("#myid").html(),如果用$("#myid").innerHTML是獲取不到的,因為innerHTML是DOM的方法。

同樣,getElementById("myid")

獲取到的DOM物件,如果要想獲取其中的內容,就可以用DOM方法來獲取:getElementById("myid").innerHTML,如果用getElementById("myid").html()是獲取不到的,因為html()是jquery方法,只有jquery物件才能使用。

所以在開發中,很多人都有一個約定俗成的習慣,在獲取的jquery物件的變數前面加上符號“$”以便區分jquery物件和DOM物件。

可以通過轉換,可以把jquery物件轉換成DOM物件,以便可以使用jquery的方法;或者把DOM物件轉換成jquery物件,以便可以使用DOM的方法和屬性。

一、jQuery物件轉成DOM物件:

1、[index]

jquery選擇器獲取的是一個類陣列,可以通過索引[index]的方法,來獲取到響應的DOM物件

var $v =$("#v") ; //jQuery物件
var v=$v[0]; //DOM物件

2、get(index)

get(index)是jquery提供的獲取相應的DOM物件的方法

var $v=$("#v"); //jQuery物件
var v=$v.get(0); //DOM物件

二、DOM物件轉成jQuery物件

1、把DOM物件用$()把包起來

var v=document.getElementById("v"); //DOM物件
var $v=$(v); //jQuery物件

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

強調:
DOM物件才能使用DOM中的方法,jquery物件是不可以用DOM中的方法。
同樣,jquery物件才能使用jquery中的方法,DOM物件是不可以使用jquery中的方法的。