jquery物件與dom物件相互轉換
阿新 • • 發佈:2019-01-01
通過jquery選擇器所獲取的元素物件和通過HTML DOM的getElementById
等查詢元素方法所獲取的元素物件是兩種不同的物件,通過jquery選擇器所獲取的元素物件是jquery物件,不能使用DOM的方法,而通過HTML DOM的getElementById
等查詢元素方法所獲取的元素物件是DOM物件,也不能使用jquery的方法。
比如$("#myid")
所獲取的就是jquery物件,如果要想獲取其中的內容,就可以用jquery方法來獲取:$("#myid").html()
,如果用$("#myid").innerHTML
是獲取不到的,因為innerHTML
是DOM的方法。
同樣,getElementById("myid")
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中的方法的。