jQuery 源码解析 jQuery对象和DOM对象的互相转换

Posted greatdesert

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 源码解析 jQuery对象和DOM对象的互相转换相关的知识,希望对你有一定的参考价值。

jQuery对象是一个类数组对象,它保存的是对应的DOM的引用,我们可以直接用[]获取某个索引内的DOM节点,也可以用get方法获取某个索引内的DOM节点,还可以用toArray()方法把jQuery对象一次性转换成一个数组,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        var jObject = $(p);
        console.log(jObject[0].innerHTML)            //输出:1
        console.log(jObject[1].innerHTML)            //输出:2
        console.log(jObject.get(2).innerHTML)        //输出:3
        console.log(jObject.toArray())               //输出:Array(3) [ p, p, p ]     ;每个元素都是一个DOM节点,等于对应的p元素
    </script>
</body>
</html>

将DOM对象转换为jQuery对象就更方便了,直接放到jQuery的构造器内即可,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        var p         =     document.getElementsByTagName(p),        
            result    =    [];                                        
        for(let i = 0;i<p.length;i++)        result.push(i)        //getElementsByTagName获取的是HTMLCollection对象,也是个类数组,我们把它转换为数组格式

        console.log( $(p) instanceof $ )                        //输出true        ;表示$(p)是一个jQuery对象
        console.log( $(p).size() )                              //输出:3            ;因为p内有3个DOM元素

        console.log( $(p[0]) instanceof $ )                     //输出true        ;表示$(p)是一个jQuery对象
        console.log( $(p[0]).size() )                           //输出:1            ;因为我们只传入一个p[0],只有一个DOM节点
    </script>
</body>
</html>

输出如下:

技术图片

原因在代码里注释得挺详细了,嗯,就这样

 

源码分析

writer by:大沙漠 QQ:22969969


 DOM转换成jQuery对象都是在jQuery内部的init()函数内实现的,如下:

init: function( selector, context, rootjQuery ) 
  /**/
  // Handle $(DOMElement)
  if ( selector.nodeType )                   //selector有属性nodeType,则认为selector是DOM元素,例如:$(document.getELementById(‘d‘))
    this.context = this[0] = selector;            //保存该DOM节点的引用
    this.length = 1;                              //设置length属性为1
    return this;                                  //返回this,以支持链式操作
  

  /**/

  return jQuery.makeArray( selector, this );  //这里是最后的逻辑,如果selector是数组或伪数组
,

makeArray是jQuery内部的一个函数,用于把一个类数组转换成真正的数据,如下:

  makeArray: function( array, results )      //将一个类数组对象转换为真正的数组
    var ret = results || [];                    //如果results不存在则修正为空数组,初始化jQuery执行到这里时这里的result等于jQuery对象,也就是上面传进来的this

    if ( array != null )                       //过滤参数array是null、undefined的情况。
      // The window, strings (and functions) also have ‘length‘
      // Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
      var type = jQuery.type( array );

      if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) )     //如果array没有属性length 或者 参数array是字符串,或者是函数,或者是正则,或者是Window对象
        push.call( ret, array );                                                                                                        //认为参数array不是数组,也不是类数组对象,调用数组方法push()把该参数插入返回值ret的末尾。
       else 
        jQuery.merge( ret, array );           //否则认为参数array是数组或类数组对象,调用方法jQuery.merge()把该参数合并到返回值ret中
      
    

    return ret;
  ,

最后返回该数组,因为我们在第二个参数传递了this,因此makeArray最后会返回this

对于jQuery对象转换为DOM对象来说,由于jQuery本身就是个类数组对象,因此,我们可以直接用[]获取索引,对于get和toArray方法来说,这些操作定义在jQuery的原型上,也就是jQuery.fn上的,如下:

jQuery.fn = jQuery.prototype =   //重写jQueyr.fn
  /**/
  toArray: function()                //将当前jQuery对象转换为真正的数组,转换后的数组包含了所有元素。
    return slice.call( this, 0 );
  ,
  get: function( num )               //返回当前jQuery 对象中指定位置的元素或包含了全部元素的数组,
    return num == null ?

      // Return a ‘clean‘ array
      this.toArray() :

      // Return just the object
      ( num < 0 ? this[ this.length + num ] : this[ num ] );      //直接返回this[num],也就是和我们用[]是一样的,只是封装了一下
  ,
  /**/

我们可以看到对于get来说,就是直接从this[]上获取的,而toArray则调用了数组了slice方法,将类数组转换成真实的数组

以上是关于jQuery 源码解析 jQuery对象和DOM对象的互相转换的主要内容,如果未能解决你的问题,请参考以下文章

jQuery源码解析(架构与依赖模块)

JQuery源码解析-JQuery的工具方法

JQuery源码解析-Dom加载过程

jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

JQuery源码解析

jquery 源码解析 节点遍历