<div> <p> <div> <p> <input type="submit"> </p> </div> </p> </div> <div> <p> 我是right </p> </div>
jQuery.fn.wrap（在每个匹配元素外部包裹指定的HTML结构）
对jQuery的每个元素分别使用wrapAll包裹一下
return this.each(function(i) { jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html ); });
行$('div').wrap('<p></p>')后结果DOM变成
<p> <div> <p> <div> <input type="submit"> </div> </p> </div> </p> <p> <div>我是right</div> </p>
jQuery.fn.unwrap（移除每个匹配元素的父元素）
使用replaceWith用匹配元素父节点的所有子节点替换匹配元素的父节点。当然了父节点是body/html/document肯定是移除不了的
return this.parent().each(function() { if ( !jQuery.nodeName( this, "body" ) ) { jQuery( this ).replaceWith( this.childNodes ); } }).end(); 执行$('div').wrap()后结果DOM变成 <div> <input type="submit"> </div> <div>我是right</div>
jQuery.fn.remove(从文档中移除匹配的元素)
你还可以使用选择器进一步缩小移除的范围，只移除当前匹配元素中符合指定选择器的部分元素。
与detach()相比，remove()函数会同时移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(detach()会保留)。
for ( ; (elem = this[i]) != null; i++ ) { if ( !selector || jQuery.filter( selector, [ elem ] ).length > 0 ) { // detach传入的参数keepData为true，不删除缓存 if ( !keepData && elem.nodeType === 1 ) { //清除缓存 jQuery.cleanData( getAll( elem ) ); } if ( elem.parentNode ) { if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) { setGlobalEval( getAll( elem, "script" ) ); } elem.parentNode.removeChild( elem ); } } }
可以看到其中有一个重要的函数cleanData，该方法是用来清除缓存：遍历每一个节点元素，对每一个节点元素做一下处理：
1.获取当前元素对应的缓存
id = elem[ internalKey ]; data = id && cache[ id ];
2.如果有绑定事件，则遍历解绑事件
if ( data.events ) { for ( type in data.events ) { if ( special[ type ] ) { jQuery.event.remove( elem, type ); //这是一个快捷方式，以避免jQuery.event.remove的开销 } else { jQuery.removeEvent( elem, type, data.handle ); } } }
3.如果jQuery.event.remove没有移除cache，则手动移除cache。其中IE需要做一些兼容处理，而且最终会将删除历史保存如core_deletedIds中
//当jQuery.event.remove没有移除cache的时候，移除cache if ( cache[ id ] ) { delete cache[ id ]; //IE不允许从节点使用delete删除expando特征, //也能对文件节点使用removeAttribute函数; //我们必须处理所有这些情况下， if ( deleteExpando ) { delete elem[ internalKey ]; } else if ( typeof elem.removeAttribute !== core_strundefined ) { elem.removeAttribute( internalKey ); } else { elem[ internalKey ] = null; } core_deletedIds.push( id ); }
jQuery.fn.detach
detach: function( selector ) {
return this.remove( selector, true );
},
jQuery.fn.empty（清空每个匹配元素内的所有内容（所有子节点））
函数将会移除每个匹配元素的所有子节点(包括文本节点、注释节点等所有类型的节点),会清空相应的缓存数据。
for ( ; (elem = this[i]) != null; i++ ) { //防止内存泄漏移除元素节点缓存 if ( elem.nodeType === 1 ) { jQuery.cleanData( getAll( elem, false ) ); } //移除所有子节点 while ( elem.firstChild ) { elem.removeChild( elem.firstChild ); } // IE<9，select节点需要将option置空 if ( elem.options && jQuery.nodeName( elem, "select" ) ) { elem.options.length = 0; } }
您可能感兴趣的文章: