一、前言

在前端开发中，如果没有用angular.js和Vue.js这类MVVM框架的话，那么就要自己操作DOM，当需要自己操作DOM的时候，为了兼容性和开发效率一般都会使用封装好的库，现在比较流行的库依然是jQuery。

在进行jQuery开发的时候，经常会遇到的场景是jQuery对象转换为原生的DOM对象以及原生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使用选择器获取的对象会被包装为一个包装集，该包装集的内部实现就是使用伪数组对象：