内容简介：前言：跟所以，本文只讲述 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()》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- ReactNative源码解析-初识源码
- Spring源码系列：BeanDefinition源码解析
- Spring源码分析：AOP源码解析（下篇）
- Spring源码分析：AOP源码解析（上篇）
- 注册中心 Eureka 源码解析 —— EndPoint 与 解析器
- 新一代Json解析库Moshi源码解析
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Master Switch
Tim Wu / Knopf / 2010-11-2 / USD 27.95
In this age of an open Internet, it is easy to forget that every American information industry, beginning with the telephone, has eventually been taken captive by some ruthless monopoly or cartel. Wit......一起来看看 《The Master Switch》 这本书的介绍吧!
