jQuery源码解析之replaceWith()/unwrap()

栏目: jQuery · 发布时间: 6年前

内容简介：前言：跟所以，本文只讲述 jQuery 中最后对 replaceWith() 处理的相关代码。

前言：跟当我调用了 $() .append()后，jQuery内部发生了什么？一样，replaceWith() 会经过 domManip() 和 buildFragment() 的洗礼，最后调用原生JS的方法来实现。

所以，本文只讲述 jQuery 中最后对 replaceWith() 处理的相关代码。

想了解 domManip() 和 buildFragment() 的，请看 当我调用了 $() .append()后，jQuery内部发生了什么？

一、示例代码

<body>
<script src="jQuery.js"></script>
<div id="divTwo">
  <p id="pTwo">这是divTwo</p>
</div>
<div id="divOne">
  <p>这是divOne</p>
</div>

<script>
  let divOne = document.querySelector("#divOne")
  let divTwo = document.querySelector("#divTwo")
  let pTwo = document.querySelector("#pTwo")
  
  // ===========replaceWith==============
  //注意：removedNode指向已经被移除的divTwo
  let removedNode=$("#divTwo").replaceWith("<span>永远</span>")
  console.log(removedNode,'removedNode21')
  //======相当于=====
  let spanA=document.createElement("span")
  spanA.innerText="永远"
  divTwo.parentNode.replaceChild(spanA,divTwo)
  
  // ==============unwrap================
  $("#pTwo").unwrap()
  //======相当于=====
  let pTwoFather=pTwo.parentNode
  if(pTwoFather.nodeName.toLowerCase()!=='body'){
    pTwoFather.parentNode.replaceChild(pTwo,pTwoFather)
  }
  
</script>
</body>

二、 `$()` .replaceWith()

作用：

把被选元素替换为新的内容

注意： `$()` .replaceWith() 指向已经被移除的元素。

源码：

// 源码6324行
    // 把被选元素替换为新的内容
    replaceWith: function() {
      var ignored = [];
      // Make the changes, replacing each non-ignored context element with the new content
      return domManip( this, arguments, function( elem ) {
        //获取选择器的父节点
        var parent = this.parentNode;
        //$.inArray() 函数用于在数组中查找指定值，并返回它的索引值（如果没有找到，则返回-1）
        //inArray() 可以看成是indexOf()
        //如果ignored数组中没有目标元素的话
        if ( jQuery.inArray( this, ignored ) < 0 ) {
          //清除目标元素的事件
          jQuery.cleanData( getAll( this ) );
          if ( parent ) {
            //原生JS方法replaceChild(newnode,oldnode) 将某子节点替换成另一个
            parent.replaceChild( elem, this );
          }
        }
        // Force callback invocation
      }, ignored );
    }

解析：

① 先找到目标元素的父节点 this.parentNode

② 使用 $ .cleanData() 清除目标元素上的事件和缓存 jQuery.cleanData( getAll( this ) )

③ 当父节点存在时，父节点调动 replaceChild() ，将待替换的元素替换到目标元素上

简单实现：

//注意：removedNode指向已经被移除的divTwo
  let removedNode=$("#divTwo").replaceWith("<span>永远</span>")
  console.log(removedNode,'removedNode21')
  //======相当于=====
  let spanA=document.createElement("span")
  spanA.innerText="永远"
  divTwo.parentNode.replaceChild(spanA,divTwo)

三、 `$()` .inArray()

作用：

查看元素在数组中的位置

源码：

//源码453行，查看元素在数组中的位置
    inArray: function( elem, arr, i ) {
      //indexOf:array.indexOf
      return arr == null ? -1 : indexOf.call( arr, elem, i );
    },

四： `$()` .unwrap()

作用：

移除被选元素的父元素（ 父节点是body则无效 ）

源码：

//源码9798行
    //移除被选元素的父元素（父节点是body则无效）
    unwrap: function( selector ) {
      //选中目标元素的父节点（除了body）
      this.parent( selector ).not( "body" ).each( function() {
        //this表示父节点
        //即父节点被它的子节点替换
        jQuery( this ).replaceWith( this.childNodes );
      } );
      return this;
    }

解析：

是在目标元素的爷爷节点上调用 replaceWith() 方法，将父节点替换成目标节点。

注意：目标元素的父节点是 `body` 的话， `$().unwrap()` 方法无效。

简单实现：

$("#pTwo").unwrap()
  //======相当于=====
  let pTwoFather=pTwo.parentNode
  if(pTwoFather.nodeName.toLowerCase()!=='body'){
    pTwoFather.parentNode.replaceChild(pTwo,pTwoFather)
  }

五、 `$()` .parent()

作用：

返回被选元素的直接父元素

源码：

//源码3245行
    //11表示文档碎片
    //返回被选元素的直接父元素
    parent: function( elem ) {
      var parent = elem.parentNode;
      return parent && parent.nodeType !== 11 ? parent : null;
    },

这个一看就懂，就不解释了

jQuery源码解析之replaceWith()/unwrap()

（完）

以上所述就是小编给大家介绍的《jQuery源码解析之replaceWith()/unwrap()》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

高性能网站建设指南（第二版）

Steve Souders / 刘彦博 / 电子工业出版社 / 2015-5 / 55.00元

《高性能网站建设指南：前端工程师技能精髓》结合Web 2.0以来Web开发领域的最新形势和特点，介绍了网站性能问题的现状、产生的原因，以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征，阐释优化Ajax、CSS、JavaScript、Flash和图片处理等要素的技术，全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南：前端工程师技能精髓》中，作者给出了14条具体的优化......一起来看看《高性能网站建设指南（第二版）》这本书的介绍吧!

码农工具

jQuery源码解析之replaceWith()/unwrap()

一、示例代码

二、 `$()` .replaceWith()

作用：

注意： `$()` .replaceWith() 指向已经被移除的元素。

源码：

解析：

简单实现：

三、 `$()` .inArray()

作用：

源码：

四： `$()` .unwrap()

作用：

源码：

解析：

注意：目标元素的父节点是 `body` 的话， `$().unwrap()` 方法无效。

简单实现：

五、 `$()` .parent()

作用：

源码：

高性能网站建设指南（第二版）

HTML 编码/解码

MD5 加密

Markdown 在线编辑器

jQuery源码解析之replaceWith()/unwrap()

一、示例代码

二、 $() .replaceWith()

作用：

注意： $() .replaceWith() 指向已经被移除的元素。

源码：

解析：

简单实现：

三、 $() .inArray()

作用：

源码：

四： $() .unwrap()

作用：

源码：

解析：

注意：目标元素的父节点是 body 的话， $().unwrap() 方法无效。

简单实现：

五、 $() .parent()

作用：

源码：

高性能网站建设指南（第二版）

HTML 编码/解码

MD5 加密

Markdown 在线编辑器

二、 `$()` .replaceWith()

注意： `$()` .replaceWith() 指向已经被移除的元素。

三、 `$()` .inArray()

四： `$()` .unwrap()

注意：目标元素的父节点是 `body` 的话， `$().unwrap()` 方法无效。

五、 `$()` .parent()