jQuery对象和原生DOM对象的相互转换以及实现原理

一、前言

在前端开发中，如果没有用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对象.png

从断点的结果来看，用选择器获取的所有的确都封装了一个伪数组对象。所以使用divs对象中的键为0的div元素，即第一个div元素：

$divs中第一个元素.png

以上有四个div，用divs[0]获取的就是该元素的原生DOM对象，这就是jQuery对象转为原生DOM对象。

有了上文的理解，原生DOM对象转jQuery对象理解起来就简单多了，是一个方法，原生的DOM对象传入$方法中，该方法内部对原生DOM对象做进一步的加工， 使其成为一个包装集，即伪数组对象。

四、总结

jQuery对象和原生DOM对象的相互转换在jQuery内部已经封装的很好了，使用起来非常简单，但是了解了其实现的原理之后更能理解jQuery的设计哲学，知其然并且知其所以然之后使用起来更得心应手。在知道了用选择器获取的包装集是伪数组对象之后，对于jQuery的隐式迭代也会有更好的理解，其中原理可以后面再分析。