关于DOM对象与JQuery对象的那些事

这个问题源自上一次的工作室讨论班，主题是“jQuery选择器的使用”，在讨论班的结尾，我留了一个思考题：  jQuery获取到的对象和直接调用原生Javascript方法获得的对象有何区别呢？   这个思考题所引申出的内容就是今天的主题了：  关于DOM对象与jQuery对象的那些事~

一、DOM对象与jQuery对象

jQuery是前端领域最流行的插件库之一了，是前端人员必学的技术之一。其强大的选择器、方便快捷的DOM操作能够在一瞬间俘获开发者的心灵，工作室里也有个代代相传的建议：千万不要太早学jQuery，不然会失去学原生JavaScript的动力的~（很多原生JavaScript里很麻烦的操作放在jQuery中区区几行代码就能实现，就会产生用jQuery打江山的幻想233333）.。。。。。。 在初学者身上，常常会出现这样的错误：

我也常常被问到这个问题：我已经引入JQuery文件了啊~ 为什么JQuery方法不能用呢？

这里先简单提一下jQuery的实现原理： jQuery的所有方法都封装在核心对象jQuery里，使用这些方法肯定需要实例化。就拿jQuery选择器来说，如下图：

$其实就是jQuery本尊了，平时在使用选择器操作时，其实是使用了jQuery（selector）方法创建并返回了一个jQuery对象。这个jQuery对象中包含着    所获取的DOM对象，并且继承了jQuery对象的方法使得其可以调用之后jQuery带来的一系列非常方便快捷的方法。下面我们来看一下实例：

在文档中创建一个DOM元素，然后分别用原生JavaScript方法和jQuery方法去获取它，得到了两个不同的返回结果。

其中原生JavaScript方法直接返回了DOM对象，可以直接利用浏览器的DOM资源管理器显示在页面中。

、             

而jQuery选择器则返回了一个jQuery对象，其中有很多属性。需要特别关注的一点是，对象中的第一个子元素存储着这个元素的DOM对象，也就是用原生JavaScript方法获取到的那个东东~。

可以看到：

直接用JavaScript方法获取到的是DOM对象，其可以使用原生的JavaScript方法而不能使用jQuery方法（原生DOM对象并未继承到jQuery方法）；

而通过选择器等jQuery方法获取到的jQuery对象，则无法使用原生JavaScript对象（经过了封装，该对象与DOM对象不同，DOM对象被封装在了一个属性中，故无法直接对jQuery对象使用JavaScript方法）。

二、jQuery对象与DOM对象的相互转换

清楚了两种对象的不同，在编码的时候就会注意区分哪些方法可以用，哪些不可以用。  这个时候，两种对象之间的转换就很重要了，它可以让我们在项目中灵活转换这两种对象，种种方法我们都可以信手拈来~    下面总结一下转换的方法：

1、DOM对象转换成jQuery对象：

通过$(selector)获取到的元素就是jQuery元素了，可以说选择器方法就是所有jQuery对象的输出地了。

对于一个已经获取好的DOM对象，直接用$()将它包起来就可以转换成jQuery对象了：

2、jQuery对象转换成DOM对象

上面提到了，jQuery对象中的第一项存储着该元素的DOM对象，我们直接访问这个属性即可得到该DOM元素。

3、注意区分两种对象。

jQuery的教材中都会提到，变量要用$开头。其实这条并不是像PHP一般严格的变量语法规定，这是鼓励大家养成一种良好的编程习惯。jQuery对象就用$开头的变量来存储，普通的JavaScript对象就用普通的变量名来存储，一目了然，可以避免很多不必要的错误。  尤其在代码量很大的程序中，如果没有清楚的标识，很容易发生开头那样的错误。

这就是关于DOM对象与jQuery对象之间的那些事了，是jQuery初学者们必须掌握的知识哦~  关于文章开头提到的jQuery实现原理，这也是我近期非常感兴趣的内容，在这里强烈推荐张鑫旭大神的博文： http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/ 
~~