您好,欢迎访问一九零五行业门户网

jQuery方法解析--append()

接下来几天俺会让俺媳妇随机挑几个jq的函数方法,然后我查看源码,以及加入自己的理解写几个博文,如果大家有特别希望了解的可以回复,这样我就不用让俺媳妇挑了。
        今天以及接下来几天的jq均已jq1.7.1这个版本为例。
首先我们来看下jqapi的说明:向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendchild方法,将它们添加到文档中的情况类似。
这个方法接收1个参数:content,接受类型有4种(3种从1.0就有了,function从1.4之后开始有)
string:字符串,这个容易理解就是可以直接$(选择器).append(aaaabbbbbcccc);这么写,当然jq内部还支持$(选择器).append('9dba6f1f949f5e07bed667bf670fd9c45db79b134e9f6b82c0b36e0489ee08ed');这种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参数为对象在这个集合中的索引值,要解释这句话,我们看个例子吧
var _body=$("body"); _body.html('');//清空body _body.append("<p></p><p></p>");//插入2个空p $("p").append(function(){return "a"});//我们要用结果猜个答案,虽然不是必须用这个例子,不过反正到这了 就这么写了
看到结果,俺猜append方法内部对整个选择器进行了遍历,然后插入了函数返回的东西。
所以index和html很容易理解了,就是在便利过程中的index和index对应的原先的html(插入之前);
最后讲一下,就是jq本身就是链式调用,所以append()返回的是选择器选择的对象被插之后的新对象,讲的好邪恶。
可以$("选择器").append().append().append().......................,不过一般都不会这么玩吧?
解释完api我们来看看源码
看到这个截图...好吧我们继续往下看。
dommanip: function (args, table, callback) { //定义6个变量,我们先不管这些变量干嘛。 var results, first, fragment, parent, value = args[0],/*args参数在append调用的时候其实只有1个参数*/ scripts = []; /* 进行了各种判断 1、!jquery.support.checkclone:确保文档碎片还没有被克隆(作用在后面) 2、arguments.length === 3,确保调用dommanip这个函数只有3个参数,否则会往后面走,这个很妙 3、typeof value === "string"确认你的参数是string类型 4、rchecked.test(value) */ if (!jquery.support.checkclone && arguments.length === 3 && typeof value === "string" && rchecked.test(value)) { //遍历选择器,看来我前面的猜测对了 return this.each(function () { //看每次循环都调用了这个dommanip,但是这些调用不会进入这个if,为什么?仔细看上面的注释与下面的调用 jquery(this).dommanip(args, table, callback, true); }); } //如果参数类型是function的 if (jquery.isfunction(value)) { //还是遍历 return this.each(function (i) { var self = jquery(this); /* 记得function的返回值吗?这边就把那边的返回值存到args[0]里面了 table ? self.html() : undefined;这句话看不懂?table这个变量,在append调用dommanip时已经写死了是true 所以在执行function类型参数的时候那个index和html是什么这边已经很明显了 */ args[0] = value.call(this, i, table ? self.html() : undefined); //取到插入的内容之后,重复第一步...... self.dommanip(args, table, callback); }); } /* 到了这里,已经确保你取到了function中返回的string 上面的各种判断已经把你参数处理成接下去想要的,淡定的往下看吧 if (this[0]) 这个判断。。。确保选择器存在,为什么不放最前面? */ if (this[0]) { /* 取父级节点 &&运算符就是 0&&1=0 1&&2=2 0&&0=0 */ parent = value && value.parentnode; // if we're in a fragment, just use that instead of building a new one /* 如果已经有元素碎片了就用原来的,不然就新建一个 */ if (jquery.support.parentnode && parent && parent.nodetype === 11 && parent.childnodes.length === this.length) { results = { fragment: parent }; } else { results = jquery.buildfragment(args, this, scripts); } fragment = results.fragment; //取碎片中最后一个 if (fragment.childnodes.length === 1) { first = fragment = fragment.firstchild; } else { first = fragment.firstchild; } //存在最后一个节点 if (first) { //确保最后一个元素是tr? table = table && jquery.nodename(first, "tr"); for (var i = 0, l = this.length, lastindex = l - 1; i < l; i++) { callback.call( table ? root(this[i], first) : this[i], // make sure that we do not leak memory by inadvertently discarding // the original fragment (which might have attached data) instead of // using it; in addition, use the original fragment object for the last // item instead of first because it can end up being emptied incorrectly // in certain situations (bug #8070). // fragments from the fragment cache must always be cloned and never used // in place. results.cacheable || (l > 1 && i < lastindex) ? jquery.clone(fragment, true, true) : fragment ); } } /*插入脚本文件的话jq会帮你去请求的*/ if (scripts.length) { jquery.each(scripts, function (i, elem) { if (elem.src) { jquery.ajax({ type: "get", global: false, url: elem.src, async: false, datatype: "script" }); } else { jquery.globaleval((elem.text || elem.textcontent || elem.innerhtml || "").replace(rcleanscript, "/*$0*/")); } if (elem.parentnode) { elem.parentnode.removechild(elem); } }); } } return this; }
在往里面还有个底层buildfragment方法,我稍微看了,解释起来颇为费劲。
底层代码解释起来麻烦俺就直接注释到源码里面去了,大家瞅瞅 有木有不对的,求斧正,另外大家可以加俺的qq群:43881427一起讨论讨论前端问题
里面还有.net  sql的高手哦
以上就是jquery方法解析--append()的详细内容。
其它类似信息

推荐信息