jQuery.each( {
  appendTo: "append",
  prependTo: "prepend",
  insertBefore: "before",
  insertAfter: "after",
  replaceAll: "replaceWith"
}, function( name, original ) {
  jQuery.fn[ name ] = function( selector ) {
    var elems,
      ret = [],
      insert = jQuery( selector ),
      last = insert.length - 1,
      i = 0;
    for ( ; i <= last; i++ ) {
      elems = i === last ? this : this.clone( true );
      jQuery( insert[ i ] )[ original ]( elems );
      // Support: Android <=4.0 only, PhantomJS 1 only
      // .get() because push.apply(_, arraylike) throws on ancient WebKit
      push.apply( ret, elems.get() );
    }
    return this.pushStack( ret );
  };
} );

如圖

內部調用如圖

源碼

append: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
      var target = manipulationTarget( this, elem );
      target.appendChild( elem );
    }
  } );
},
prepend: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
      var target = manipulationTarget( this, elem );
      target.insertBefore( elem, target.firstChild );
    }
  } );
},
before: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.parentNode ) {
      this.parentNode.insertBefore( elem, this );
    }
  } );
},
after: function() {
  return domManip( this, arguments, function( elem ) {
    if ( this.parentNode ) {
      this.parentNode.insertBefore( elem, this.nextSibling );
    }
  } );
},
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;
    if ( jQuery.inArray( this, ignored ) < 0 ) {
      jQuery.cleanData( getAll( this ) );
      if ( parent ) {
        parent.replaceChild( elem, this );
      }
    }
  // Force callback invocation
  }, ignored );
}

domManip 的實現(xiàn)

domManip 的主要功能就是添加 DOM 元素，因為添加的位置不同而提供了四個公開函數 append、prepend、before、after，此外還有一個 replaceWith。簡單說 domManip 就做了兩件事

1.先完成 DOM 節(jié)點添加

2.如果添加的 DOM 節(jié)點內有 script 標簽，需要額外處理下。對于可執(zhí)行的 script （通過type屬性判斷）則執(zhí)行其內的腳本代碼，其它的則不執(zhí)行。

domManip 依賴的一個重要函數就是 buildFragment，為 DOM 插入提高了性能。

domManip 內對 script 節(jié)點元素做了特殊處理

1.script 無 type 屬性，默認會執(zhí)行其內的 JS 腳本

2.script 的 type="text/javascript" 或 type="text/ecmascript" ，會執(zhí)行其內的 JS 腳本

3.script 如果有 src 屬性，會執(zhí)行 $._evalUrl 請求遠程的 JS 文件并執(zhí)行

4.其它不會執(zhí)行 JS 腳本，有時我們會用 script 來做 html 模板，如 underscore.js，type="text/template" 或 type="text/plain" 這種，其內的 JS 都不會被執(zhí)行

此外 dataPriv.access( node, "globalEval" )，這一句標示了如果該 script 已經執(zhí)行過，則不會再次執(zhí)行?；蛘哒f執(zhí)行后會設置一個 globalEval: true 的標示。

domManip 內部依賴 buildFragment、restoreScript、disableScript、jQuery._evalUrl、DOMEval 這幾個小函數，而 restoreScript、jQuery._evalUrl 也僅在 domManip 用到。

// Replace/restore the type attribute of script elements for safe DOM manipulation
function disableScript( elem ) {
  elem.type = ( elem.getAttribute( "type" ) !== null ) + "/" + elem.type;
  return elem;
}
function restoreScript( elem ) {
  var match = rscriptTypeMasked.exec( elem.type );
  if ( match ) {
    elem.type = match[ 1 ];
  } else {
    elem.removeAttribute( "type" );
  }
  return elem;
}
jQuery._evalUrl = function( url ) {
  return jQuery.ajax( {
    url: url,
    // Make this explicit, since user can override this through ajaxSetup (#11264)
    type: "GET",
    dataType: "script",
    cache: true,
    async: false,
    global: false,
    "throws": true
  } );
};

domManip 經歷了各個版本的演變

1.

3.0.x 之前版本的 domManip 函數是掛在 jQuery 對象上面的（jQuery.fn.domManip），即通過 $().domManip 方式可以訪問；3.0.x 后 domManip 是一個私有函數，外部無法訪問

2.

1.2.x 之前 domManip 有 4 個參數；1.3.x ~ 1.9.x 是 3 個參數；2.x 只有 2 個參數；3.x 有 4 個參數

3.

1.9.x 之前的版本 replaceWith 沒有使用 domMainp

以上所述是小編給大家介紹的jQuery3.0的domManip函數，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章: