许多像我一样的刚接触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中的方法。