内容简介：前言：跟所以，本文只讲述 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源码解析
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
