一、前言
在前端开发中，如果没有用angular.js和Vue.js这类MVVM框架的话，那么就要自己操作DOM，当需要自己操作DOM的时候，为了兼容性和开发效率一般都会使用封装好的库，现在比较流行的库依然是jQuery。
在进行jQuery开发的时候，经常会遇到的场景是jQuery对象转换为原生的DOM对象以及原生DOM对象转换为jQuery对象。转换的方式非常简单：
- 原生DOM对象转jQuery对象：
var box = document.getElementById('box');
var $box = $(box);
- jQuery对象转原生DOM对象：
var $box = $('#box');
var box1 = $box[0];
var box2 = $box.get(0);
注：个人喜欢在jQuery对象前加“$”符号，加以区分jQuery对象和原生DOM对象
以上就是jQuery对和原生DOM对象的的互相转换，是不是真的很简单呢！但是作为一个有追求的前端开发人员，仅仅知道如何用是不够的，更要了解内部的实现细节！！！
二、伪数组对象
在jQuery的中有一个包装集概念，包装集就是用伪数组实现的。先看下正常的数组的定义及遍历：
var arr = ['iceman' , 'mengzhe' , 'shoushou' , 'zhuzhu'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
输出：
正常数组的遍历结果.png
以上便是以字面量的方式定义了一个数组，并且添加几个简单的字符串，以及遍历输出每一项，这个在JavaScript中是再正常不过了。那么，什么是伪数组呢？.... 就是用对象来模拟的！
var objArr = {
0 : 'iceman',
1 : 'mengzhe',
2 : 'shoushou',
3 : 'zhuzhu',
length : 4
}
for (var i = 0; i < $objArr.length; i++) {
console.log($objArr[i]);
}
输出：
伪数组的遍历结果.png
以上代码中以对象字面量的形式定义了一个对象objArr，这个对象就用来模拟数组，即伪数组对象，在$arr中要伪装的数组项以数字0、1、2...为键。js中获取一个对象的属性值可以使用obj.prop或者obj['prop']，当对象字面量中键是以数字开头的时候，用obj['prop']获取值的时候可以不加引号，即obj[prop]，在上面的实例中就是objArr[1]、objArr[2]、objArr[3]....
看到这里有没有一种很似曾相识的感觉呢？ 前面说到，jQuery对象转原生DOM对象的其中一种方式是：jQuery对象[0]，和以上的对象字面量中键是数字的形式是不很像呢？ 另外多说一句，jQuery对象.get(0)的内部使用的就是jQuery对象[0]来实现的。
三、转换的细节
jQuery使用选择器获取的对象会被包装为一个包装集，该包装集的内部实现就是使用伪数组对象：
断点查看jQuery对象.png
从断点的结果来看，用选择器获取的所有的确都封装了一个伪数组对象。所以使用$divs[0]获取的就是$divs对象中的键为0的div元素，即第一个div元素：
$divs中第一个元素.png
以上有四个div，用$divs[0]获取的是第一个，并且获取的是原生的DOM对象，那么如果用选择器只获取到了一个元素，那么用$divs[0]获取的就是该元素的原生DOM对象，这就是jQuery对象转为原生DOM对象。
有了上文的理解，原生DOM对象转jQuery对象理解起来就简单多了，$(原生DOM对象)的方式可以将原生DOM对象转为jQuery对象，其实$是一个方法，原生的DOM对象传入$方法中，该方法内部对原生DOM对象做进一步的加工， 使其成为一个包装集，即伪数组对象。
四、总结
jQuery对象和原生DOM对象的相互转换在jQuery内部已经封装的很好了，使用起来非常简单，但是了解了其实现的原理之后更能理解jQuery的设计哲学，知其然并且知其所以然之后使用起来更得心应手。在知道了用选择器获取的包装集是伪数组对象之后，对于jQuery的隐式迭代也会有更好的理解，其中原理可以后面再分析。
网友评论