码迷，mamicode.com
首页 > 移动开发 > 详细

jquery append()详解

时间：2016-09-22 13:12:47      阅读：418      评论：0      收藏：0      [点我收藏+]

标签：

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="#"></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()详解

标签：

原文地址：http://www.cnblogs.com/everest33Tong/p/5895839.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！