jQuery入门讲解-jQuery对象 和 DOM对象

第一次学习jQuery，经常分辨不清哪些是jQuery对象，哪些是DOM对象，通过本节我们来了解一下它们之间的关系。

什么是jQuery对象 和 DOM对象？

1、DOM对象

DOM(Document Object Model，文档对象模型)，每一份DOM都可以表示成一棵树。

在 js 中，通过 getElementByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就是 DOM 对象。而且 DOM 对象可以使用 js 中的方法，如： innerHTML。

2、jQuery对象

jQuery对象，是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，它可以使用jQuery里面的方法。

例如：

上面的代码等同于：

在jQ中，无法使用任何DOM对象的方法，例如：$('id').innerHTML，这是错误的写法。同样，在js中也无法使用jQ对象里面的方法，例如：document.getElementById('id').html()，这样也是错误的。

 jQuery对象 和 DOM对象相互转换

为了大家在两者对象转换的时候不混淆，在定义jQ对象的时候，前面加上‘$’符。

1、jQ对象转成DOM对象：

jQ对象中是不能使用DOM对象里的方法的，但是如果jQ里的一些方法忘记的时候，只记得DOM中的方法的时候，怎么办呢？这时候就可以将jQ对象转换成DOM对象。

方法1（常用）：[index]

方法二：get(index)

2、DOM对象转成jQ对象：

DOM对象转成jQ对象的十分简单，只需要用$()把DOM对象包裹起来就是一个jQ对象了。转换之后就可以任意使用jQ的方法了。

示例代码：隔行变色 [ jq对象与DOM对象转换-隔行变色.html ]

实例效果：

好了今天的内容就讲那么多，大家可以回去把实例照着敲一遍练习一下。

下节课我们讲jquery选择器。

《jQuery入门讲解》系列教程由公众号：网页前端开发学习 首发，大家可以关注一下，我们下次再见。