首页 > 代码库 > jquery append()详解

jquery append()详解

1 http://www.365mini.com/page/jquery-append.htm

2 http://blog.csdn.net/chaiyining007/article/details/8213699

 

jq1.7.1这个版本为例。

首先我们来看下jq api的说明:向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似。

 

 

技术分享

这个方法接收1个参数:content,接受类型有4种(3种从1.0就有了,function从1.4之后开始有)

String:字符串,这个容易理解就是可以直接$("选择器").append("aaaabbbbbcccc");这么写,当然jq内部还支持$("选择器").append(‘<a href="http://www.mamicode.com/#"></a>‘);这种html标签的字符串,至于性能方面咋们后面看源码的时候在细论。

Element:节点,这个也容易理解就是dom节点么基本上俺是写成,$("选择器").append(document.getElementsByTagName("a"))这类,不过这么写的同学要注意一点,这么写会将原来位置的dom给“剪切”到选择器底部,请允许我这么形容。

jQuery:jQuery对象,这注意这个对象是jq选择器加工过的对象,比如$("选择器1").append($(“选择器2”));而不是$("选择器1").append($);写到这俺笑了,应该没人写append($)这个是吧。

function(index, html):一个function对象(参数后面讲),可以写成$("选择器").append(function(index,html){return ""});其中return "" 可以省略,任何函数都有返回值,没写return就会返回undefined,这个貌似高程或者权威指南有讲,具体哪写的,俺也忘记了。index参数为对象在这个集合中的索引值,要解释这句话,我们看个例子吧

 

 

[javascript] view plain copy
 
  1. var _body=$("body");  
  2. _body.html(‘‘);//清空body  
  3. _body.append("<div></div><div></div>");//插入2个空div  
  4. $("div").append(function(){return "a"});//我们要用结果猜个答案,虽然不是必须用这个例子,不过反正到这了 就这么写了  

 

技术分享

看到结果,俺猜append方法内部对整个选择器进行了遍历技术分享,然后插入了函数返回的东西。

所以index和html很容易理解了,就是在便利过程中的index和index对应的原先的html(插入之前);

最后讲一下,就是jq本身就是链式调用,所以append()返回的是选择器选择的对象被插之后的新对象技术分享,讲的好邪恶。

可以$("选择器").append().append().append().......................,不过一般都不会这么玩吧?

解释完API我们来看看源码

技术分享

看到这个截图...好吧我们继续往下看。

 

[javascript] view plain copy
 
  1. domManip: function (args, table, callback) {  
  2.             //定义6个变量,我们先不管这些变量干嘛。  
  3.             var results, first, fragment, parent,  
  4.             value = args[0],/*args参数在append调用的时候其实只有1个参数*/  
  5.             scripts = [];  
  6.             /* 
  7.             进行了各种判断 
  8.                 1、!jQuery.support.checkClone:确保文档碎片还没有被克隆(作用在后面) 
  9.                 2、arguments.length === 3,确保调用domManip这个函数只有3个参数,否则会往后面走,这个很妙 
  10.                 3、typeof value === "string"确认你的参数是string类型 
  11.                 4、rchecked.test(value) 
  12.             */  
  13.             if (!jQuery.support.checkClone && arguments.length === 3 && typeof value === "string" && rchecked.test(value)) {  
  14.                 //遍历选择器,看来我前面的猜测对了  
  15.                 return this.each(function () {  
  16.                     //看每次循环都调用了这个domManip,但是这些调用不会进入这个if,为什么?仔细看上面的注释与下面的调用  
  17.                     jQuery(this).domManip(args, table, callback, true);  
  18.                 });  
  19.             }  
  20.             //如果参数类型是function的  
  21.             if (jQuery.isFunction(value)) {  
  22.                 //还是遍历  
  23.                 return this.each(function (i) {  
  24.                     var self = jQuery(this);  
  25.                     /* 
  26.                     记得function的返回值吗?这边就把那边的返回值存到args[0]里面了 
  27.                     table ? self.html() : undefined;这句话看不懂?table这个变量,在append调用domManip时已经写死了是true 
  28.                     所以在执行function类型参数的时候那个index和html是什么这边已经很明显了 
  29.                     */  
  30.                     args[0] = value.call(this, i, table ? self.html() : undefined);  
  31.                     //取到插入的内容之后,重复第一步......  
  32.                     self.domManip(args, table, callback);  
  33.                 });  
  34.             }  
  35.             /* 
  36.             到了这里,已经确保你取到了function中返回的string 
  37.             上面的各种判断已经把你参数处理成接下去想要的,淡定的往下看吧 
  38.             if (this[0]) 这个判断。。。确保选择器存在,为什么不放最前面? 
  39.             */  
  40.             if (this[0]) {  
  41.                 /* 
  42.                 取父级节点 
  43.                 &&运算符就是 
  44.                 0&&1=0 
  45.                 1&&2=2 
  46.                 0&&0=0 
  47.                 */  
  48.                 parent = value && value.parentNode;  
  49.   
  50.                 // If we‘re in a fragment, just use that instead of building a new one  
  51.                 /* 
  52.                 如果已经有元素碎片了就用原来的,不然就新建一个 
  53.                 */  
  54.                 if (jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length) {  
  55.                     results = { fragment: parent };  
  56.   
  57.                 } else {  
  58.                     results = jQuery.buildFragment(args, this, scripts);  
  59.                 }  
  60.   
  61.                 fragment = results.fragment;  
  62.                 //取碎片中最后一个  
  63.                 if (fragment.childNodes.length === 1) {  
  64.                     first = fragment = fragment.firstChild;  
  65.                 } else {  
  66.                     first = fragment.firstChild;  
  67.                 }  
  68.                 //存在最后一个节点  
  69.                 if (first) {  
  70.                     //确保最后一个元素是tr?  
  71.                     table = table && jQuery.nodeName(first, "tr");  
  72.   
  73.                     for (var i = 0, l = this.length, lastIndex = l - 1; i < l; i++) {  
  74.                         callback.call(  
  75.                         table ?  
  76.                             root(this[i], first) :  
  77.                             this[i],  
  78.                         // Make sure that we do not leak memory by inadvertently discarding  
  79.                         // the original fragment (which might have attached data) instead of  
  80.                         // using it; in addition, use the original fragment object for the last  
  81.                         // item instead of first because it can end up being emptied incorrectly  
  82.                         // in certain situations (Bug #8070).  
  83.                         // Fragments from the fragment cache must always be cloned and never used  
  84.                         // in place.  
  85.                         results.cacheable || (l > 1 && i < lastIndex) ?  
  86.                             jQuery.clone(fragment, true, true) :  
  87.                             fragment  
  88.                     );  
  89.                     }  
  90.                 }  
  91.                 /*插入脚本文件的话jq会帮你去请求的*/  
  92.                 if (scripts.length) {  
  93.                     jQuery.each(scripts, function (i, elem) {  
  94.                         if (elem.src) {  
  95.                             jQuery.ajax({  
  96.                                 type: "GET",  
  97.                                 global: false,  
  98.                                 url: elem.src,  
  99.                                 async: false,  
  100.                                 dataType: "script"  
  101.                             });  
  102.                         } else {  
  103.                             jQuery.globalEval((elem.text || elem.textContent || elem.innerHTML || "").replace(rcleanScript, "/*$0*/"));  
  104.                         }  
  105.   
  106.                         if (elem.parentNode) {  
  107.                             elem.parentNode.removeChild(elem);  
  108.                         }  
  109.                     });  
  110.                 }  
  111.             }  
  112.   
  113.             return this;  
  114.         }  


在往里面还有个底层buildFragment方法,我稍微看了,解释起来颇为费劲。

jquery append()详解