Deep understanding of jQuery3.0 Dommanip functions _jquery

Dommanip has a long history of this function, starting with the jquery 1.0 version, until the latest jquery version. It's a veteran tool function.

The main function of Dommanip is to implement DOM insertion and substitution. A total of the following 5 function services

• Internal rear Insert (append)

• Internal front insert (prepend)

• External front insert (before)

• Externally inserted (after)

• Replacement Element (replacewith,1.9.x previous version not using DOMMAINP)

And one of each generates another 5 functions: Appendto, Prependto, InsertBefore, InsertAfter, ReplaceAll

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
      //. Get () because Push.apply (_, Arraylike) throws on ancient webk It
      push.apply (ret, elems.get ());
    }
    Return This.pushstack (ret);}
  ;
} );

As shown in figure

Internal call like Figure

Source

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.nodet ype = = 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.par
    Entnode.insertbefore (Elem, this);
}
  } ); }, After:function () {return Dommanip (this, arguments, function (elem) {if (This.parentnode) {This.pare
    Ntnode.insertbefore (Elem, this.nextsibling);
}
  } );
  }, Replacewith:function () {var ignored = []; Make the changes and 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 (the GetAll (this));
      if (parent) {Parent.replacechild (elem, this);
}//Force callback invocation}, ignored); }

The realization of Dommanip

The main function of Dommanip is to add DOM elements, because the location of the addition provides four public functions append, prepend, before, after, in addition to a replacewith. Simply put, Dommanip did two things.

1. Complete the DOM node add first

2. If a script tag is added to the DOM node, additional processing is required. For executable scripts (judged by the Type property), the script code is executed and the rest is not executed.

An important function of Dommanip dependency is buildfragment, which improves performance for DOM inserts.

Special handling of script node elements within Dommanip

1.script no type attribute, default will execute JS script inside

2.script of type= "Text/javascript" or type= "Text/ecmascript", will execute the JS script inside

3.script if have src attribute, will execute $._evalurl request remote JS file and execute

4. Other will not execute JS script, sometimes we will use script to do HTML template, such as underscore.js,type= "Text/template" or type= "Text/plain" This, the JS inside will not be executed

In addition datapriv.access (node, "Globaleval"), this sentence indicates that if the script has been executed, it will not be executed again. Or, after execution, set a globaleval:true mark.

Dommanip internal reliance on Buildfragment, Restorescript, Disablescript, Jquery._evalurl, domeval These small functions, and restorescript, jQuery._ Evalurl is also used only in Dommanip.

Replace/restore the type 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 O Verride this through Ajaxsetup (#11264)
    type: ' Get ',
    dataType: ' script ',
    cache:true,
    async:false ,
    Global:false,
    "throws": true
  });

Dommanip experienced the evolution of each version.

1.

Prior to 3.0.x, the Dommanip function was hung above the JQuery object (JQuery.fn.domManip), that is, through $ (). Dommanip method can be accessed; 3.0.x Dommanip is a private function, outside inaccessible

2.

1.2.x Dommanip has 4 parameters, 1.3.x ~ 1.9.x is 3 parameters; 2.x has 2 parameters; 3.x has 4 parameters.

3.

1.9.x Previous version replacewith did not use DOMMAINP

The above is a small set to introduce the jQuery3.0 Dommanip function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!