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使用选择器获取的对象会被包装为一个包装集,该包装集的内部实现就是使用伪数组对象:

断点查看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的隐式迭代也会有更好的理解,其中原理可以后面再分析。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 2,649评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,219评论 0 11
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员小月阅读 15,342评论 18 499
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 835评论 0 9
  • 个人为求生结果了欲置自己死地的对手,这正当吗?如果为了钱杀人,比如升职、偷猎等等,听起来合理吗?为...
    源锦阅读 140评论 0 0
  • 今晚加班写工作周报,很晚才回家。骑车路过一个卖橘子的小摊,停下车准备买点。 旁边的一位大哥已经挑选好递给胖乎乎的老...
    会飞的书阅读 177评论 0 4
  • 经过江旧长期的,坚持不懈的努力,终于成功约到了顾长安共进晚餐。 原因很简单,因为顾长安已经连续几天都没有人约着一起...
    乔醉阅读 89评论 2 1
  • 大凡心理痛苦的人,多不是行动派;行动派,鲜有心理痛苦的。 行动派很少淤积心理能量,他们的心理能量都一路撒在了行动的...
    自有说阅读 262评论 1 1