getElementById和$(#id)區別簡述

許多像我一樣的剛接觸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中的方法。

發佈了37 篇原創文章 · 獲贊 21 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章