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中的方法。