一、前言

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

在进行jQuery开发的时候,经常会遇到的场景是jQuery对象转换为原生的DOM对象以及原生DOM对象转换为jQuery对象。转换的方式非常简单:

  • 原生DOM对象转jQuery对象:
    [/crayon]
  • jQuery对象转原生DOM对象:
    [/crayon]
    注:个人喜欢在jQuery对象前加“$”符号,加以区分jQuery对象和原生DOM对象

以上就是jQuery对和原生DOM对象的的互相转换,是不是真的很简单呢!但是作为一个有追求的前端开发人员,仅仅知道如何用是不够的,更要了解内部的实现细节!!!

二、伪数组对象

在jQuery的中有一个

概念,

就是用伪数组实现的。先看下正常的数组的定义及遍历:

[/crayon]
输出:

正常数组的遍历结果.png

以上便是以字面量的方式定义了一个数组,并且添加几个简单的字符串,以及遍历输出每一项,这个在JavaScript中是再正常不过了。那么,什么是伪数组呢?…. 就是用对象来模拟的!

[/crayon]
输出:

伪数组的遍历结果.png

以上代码中以对象字面量的形式定义了一个对象objArr,这个对象就用来模拟数组,即伪数组对象,在$arr中要伪装的数组项以数字0、1、2…为键。js中获取一个对象的属性值可以使用

或者

,当对象字面量中键是以数字开头的时候,用

获取值的时候可以不加引号,即

,在上面的实例中就是

….

看到这里有没有一种很似曾相识的感觉呢? 前面说到,jQuery对象转原生DOM对象的其中一种方式是:

,和以上的对象字面量中键是数字的形式是不很像呢? 另外多说一句,

的内部使用的就是

来实现的。

三、转换的细节

jQuery使用选择器获取的对象会被包装为一个包装集,该包装集的内部实现就是使用伪数组对象:

断点查看jQuery对象.png

从断点的结果来看,用选择器获取的所有的确都封装了一个伪数组对象。所以使用

获取的就是$divs对象中的键为0的div元素,即第一个div元素:

$divs中第一个元素.png

以上有四个div,用

获取的是第一个,并且获取的是原生的DOM对象,那么如果用选择器只获取到了一个元素,那么用

获取的就是该元素的原生DOM对象,这就是jQuery对象转为原生DOM对象。

有了上文的理解,原生DOM对象转jQuery对象理解起来就简单多了,

的方式可以将原生DOM对象转为jQuery对象,其实

是一个方法,原生的DOM对象传入

方法中,该方法内部对原生DOM对象做进一步的加工, 使其成为一个包装集,即伪数组对象。

四、总结

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

3 1 收藏


直接登录