jquery append()详解
1http://www.365mini.com/page/jquery-append.htm
2http://blog.csdn.net/chaiyining007/article/details/8213699
jq1.7.1這個版本為例。
首先我們來看下jq api的說明:向每個匹配的元素內(nèi)部追加內(nèi)容。
這個操作與對指定的元素執(zhí)行appendChild方法,將它們添加到文檔中的情況類似。
這個方法接收1個參數(shù):content,接受類型有4種(3種從1.0就有了,function從1.4之后開始有)
String:字符串,這個容易理解就是可以直接$("選擇器").append("aaaabbbbbcccc");這么寫,當(dāng)然jq內(nèi)部還支持$("選擇器").append('<a href="#"></a>');這種html標(biāo)簽的字符串,至于性能方面咋們后面看源碼的時候在細(xì)論。
Element:節(jié)點(diǎn),這個也容易理解就是dom節(jié)點(diǎn)么基本上俺是寫成,$("選擇器").append(document.getElementsByTagName("a"))這類,不過這么寫的同學(xué)要注意一點(diǎn),這么寫會將原來位置的dom給“剪切”到選擇器底部,請?jiān)试S我這么形容。
jQuery:jQuery對象,這注意這個對象是jq選擇器加工過的對象,比如$("選擇器1").append($(“選擇器2”));而不是$("選擇器1").append($);寫到這俺笑了,應(yīng)該沒人寫append($)這個是吧。
function(index, html):一個function對象(參數(shù)后面講),可以寫成$("選擇器").append(function(index,html){return ""});其中return "" 可以省略,任何函數(shù)都有返回值,沒寫return就會返回undefined,這個貌似高程或者權(quán)威指南有講,具體哪寫的,俺也忘記了。index參數(shù)為對象在這個集合中的索引值,要解釋這句話,我們看個例子吧
[javascript]view plaincopy
var_body=$("body");
_body.html('');//清空body
_body.append("<div></div><div></div>");//插入2個空div
$("div").append(function(){return"a"});//我們要用結(jié)果猜個答案,雖然不是必須用這個例子,不過反正到這了就這么寫了
看到結(jié)果,俺猜append方法內(nèi)部對整個選擇器進(jìn)行了遍歷,然后插入了函數(shù)返回的東西。
所以index和html很容易理解了,就是在便利過程中的index和index對應(yīng)的原先的html(插入之前);
最后講一下,就是jq本身就是鏈?zhǔn)秸{(diào)用,所以append()返回的是選擇器選擇的對象被插之后的新對象,講的好邪惡。
可以$("選擇器").append().append().append().......................,不過一般都不會這么玩吧?
解釋完API我們來看看源碼
看到這個截圖...好吧我們繼續(xù)往下看。
[javascript]view plaincopy
domManip:function(args,table,callback){
//定義6個變量,我們先不管這些變量干嘛。
varresults,first,fragment,parent,
value=args[0],/*args參數(shù)在append調(diào)用的時候其實(shí)只有1個參數(shù)*/
scripts=[];
/*
進(jìn)行了各種判斷
1、!jQuery.support.checkClone:確保文檔碎片還沒有被克隆(作用在后面)
2、arguments.length===3,確保調(diào)用domManip這個函數(shù)只有3個參數(shù),否則會往后面走,這個很妙
3、typeofvalue==="string"確認(rèn)你的參數(shù)是string類型
4、rchecked.test(value)
*/
if(!jQuery.support.checkClone&&arguments.length===3&&typeofvalue==="string"&&rchecked.test(value)){
//遍歷選擇器,看來我前面的猜測對了
returnthis.each(function(){
//看每次循環(huán)都調(diào)用了這個domManip,但是這些調(diào)用不會進(jìn)入這個if,為什么?仔細(xì)看上面的注釋與下面的調(diào)用
jQuery(this).domManip(args,table,callback,true);
});
}
//如果參數(shù)類型是function的
if(jQuery.isFunction(value)){
//還是遍歷
returnthis.each(function(i){
varself=jQuery(this);
/*
記得function的返回值嗎?這邊就把那邊的返回值存到args[0]里面了
table?self.html():undefined;這句話看不懂?table這個變量,在append調(diào)用domManip時已經(jīng)寫死了是true
所以在執(zhí)行function類型參數(shù)的時候那個index和html是什么這邊已經(jīng)很明顯了
*/
args[0]=value.call(this,i,table?self.html():undefined);
//取到插入的內(nèi)容之后,重復(fù)第一步......
self.domManip(args,table,callback);
});
}
/*
到了這里,已經(jīng)確保你取到了function中返回的string
上面的各種判斷已經(jīng)把你參數(shù)處理成接下去想要的,淡定的往下看吧
if(this[0])這個判斷。。。確保選擇器存在,為什么不放最前面?
*/
if(this[0]){
/*
取父級節(jié)點(diǎn)
&&運(yùn)算符就是
0&&1=0
1&&2=2
0&&0=0
*/
parent=value&&value.parentNode;
//Ifwe'reinafragment,justusethatinsteadofbuildinganewone
/*
如果已經(jīng)有元素碎片了就用原來的,不然就新建一個
*/
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;
}
//存在最后一個節(jié)點(diǎn)
if(first){
//確保最后一個元素是tr?
table=table&&jQuery.nodeName(first,"tr");
for(vari=0,l=this.length,lastIndex=l-1;i<l;i++){
callback.call(
table?
root(this[i],first):
this[i],
//Makesurethatwedonotleakmemorybyinadvertentlydiscarding
//theoriginalfragment(whichmighthaveattacheddata)insteadof
//usingit;inaddition,usetheoriginalfragmentobjectforthelast
//iteminsteadoffirstbecauseitcanendupbeingemptiedincorrectly
//incertainsituations(Bug#8070).
//Fragmentsfromthefragmentcachemustalwaysbeclonedandneverused
//inplace.
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);
}
});
}
}
returnthis;
}
在往里面還有個底層buildFragment方法,我稍微看了,解釋起來頗為費(fèi)勁。
總結(jié)
以上是生活随笔為你收集整理的jquery append()详解的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: PLSQL的使用
- 下一篇: ros学习之ros文件系统级