許多像我一樣的剛接觸web開發的,在沒有系統學習html5,js以及jquery的基礎上,直接上手,肯定想過或者被這個問題迷惑過
到底
getElementById和$(#id)的區別是什麼,使用他們又有什麼需要注意的地方呢?首先,我們平時需要獲取一個html中某個標籤,我們會使用
document.getElementById("startItem").innerHTML = startItem;
這個語句來進行賦值,爲什麼不能用$("#startItem").innerHTML來進行賦值呢,原因就是上面方法獲得的是DOM對象,而使用$("#startItem")方法獲得的是Jquery對象
所以,這兩種有什麼聯繫和區別呢?
首先第一個區別,也是最大的區別就是jquery方法獲取的對象才能使用jquery的方法,而dom對象則不可以
他們之間聯繫如下
1) Jquery對象可以轉爲dom對象,有兩個方法可以實現這個轉換
(1)jQuery對象是一個數據對象,可以通過[index]的方法,來得到相應的DOM對象。
如:var $startItem =$("#startItem") ; //jQuery對象
var startItemTemp=$startItem[0]; //DOM對象
(2)jQuery本身提供,通過.get(index)方法,得到相應的DOM對象
如:var $startItem=$("#startItem"); //jQuery對象
var startItemTemp=$startItem.get(0); //DOM對象
2)dom對象可以實現Jquery對象的轉換
對於已經是一個DOM對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。$(DOM對象)
如:var startItem=document.getElementById("startItem"); //DOM對象
var $startItemTemp=$(startItem); //jQuery對象
轉換後,就可以任意使用jQuery的方法了。
通過以上方法,可以任意的相互轉換jQuery對象和DOM對象。需要再強調注意的是:DOM對象才能使用DOM中的方法,jQuery對象是不可以用DOM中的方法。