第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

end疑問

請(qǐng)教一個(gè)問題,關(guān)于end(),如果調(diào)用遍歷方法,它改變堆棧,我們使用end()方法,ok沒問題,返回上一個(gè)堆棧對(duì)象,下面這個(gè)例子我不是很理解:

<div>測(cè)試內(nèi)容1</div>?

<div>測(cè)試內(nèi)容2</div>?

<script>$('<p>新增內(nèi)容</p>').appendTo('div').addClass('c1').end().addClass('c2');</script>

為什么end()之后的對(duì)象是第二個(gè)p?而不是新增的'<p>新增內(nèi)容</p>',為什么是一個(gè)p,不是[p,p]



正在回答

2 回答

感謝版主的回答,特意看了一下appendTo的源碼

jQuery.each({
	appendTo:?"append",
	prependTo:?"prepend",
	insertBefore:?"before",
	insertAfter:?"after",
	replaceAll:?"replaceWith"
},?function(?name,?original?)?{
	jQuery.fn[?name?]?=?function(?selector?)?{
		var?elems,
			i?=?0,
			ret?=?[],
			insert?=?jQuery(?selector?),
			last?=?insert.length?-?1;

		for?(?;?i?<=?last;?i++?)?{
			elems?=?i?===?last???this?:?this.clone(true);
			jQuery(?insert[i]?)[?original?](?elems?);

			//?Modern?browsers?can?apply?jQuery?collections?as?arrays,?but?oldIE?needs?a?.get()
			core_push.apply(?ret,?elems.get()?);
		}

		return?this.pushStack(?ret?);
	};
});

1)insert取得選擇器div的2個(gè)對(duì)象,然后進(jìn)行循環(huán)

2)第一次循環(huán)elems保存this($('<p>新增內(nèi)容</p>'))的克隆,然后經(jīng)過jQuery( insert[i] )[ original ]( elems );這里面主要是調(diào)用的$(div)的append()方法,而append()方法主要調(diào)用js的原生態(tài)的appendChild()方法,導(dǎo)致的結(jié)果就是,div跟elems有了父子關(guān)系,注意這里的elems只是克隆所以不影響this,這時(shí)debug可以看到elems是有parentElement的(第一個(gè)div);core_push不多說,存放數(shù)據(jù)組的。

3)第二次循環(huán)elems=this,這一句很關(guān)鍵,直接跟this綁定,然后elems再執(zhí)行剛才的第一次Query( insert[i] )[ original ]( elems )這個(gè)過程,這時(shí)候的insert[i]是第二個(gè)div,理所當(dāng)然的this和elems跟第二個(gè)div綁定成了,有了父子關(guān)系

4)循環(huán)結(jié)束進(jìn)入我們堆棧操作this.pushStack( ret ),里面比較簡(jiǎn)單

pushStack:?function(?elems?)?{

		//?Build?a?new?jQuery?matched?element?set
		var?ret?=?jQuery.merge(?this.constructor(),?elems?);

		//?Add?the?old?object?onto?the?stack?(as?a?reference)
		ret.prevObject?=?this;
		ret.context?=?this.context;

		//?Return?the?newly-formed?element?set
		return?ret;
	},

返回?cái)?shù)組的prevObject設(shè)置成第三步的this

3 回復(fù) 有任何疑惑可以回復(fù)我~

這個(gè)問題問的很好,為什么不是數(shù)組的[p,p]?


這里我們要從本質(zhì)上出發(fā),我這個(gè)p是怎么來的?
是通過

$('<p>新增內(nèi)容</p>')

產(chǎn)生的,但是這個(gè)p元素是不是只有一個(gè)?
只是通過appendTo('div')的時(shí)候,會(huì)產(chǎn)生二個(gè),其實(shí)是因?yàn)閍ppendTo內(nèi)部在調(diào)用文檔碎片clone了一個(gè)p,所以才會(huì)存在2個(gè)p元素

那么end的本質(zhì)是調(diào)用prevObject的引用,prevObject其實(shí)是保存最終引用的

$('<p>新增內(nèi)容</p>')

這個(gè)產(chǎn)生的p,所以為什么只有一個(gè)的原因了

3 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
jQuery源碼解析(架構(gòu)與依賴模塊)
  • 參與學(xué)習(xí)       84047    人
  • 解答問題       290    個(gè)

由淺入深地剖析jQuery庫(kù)的設(shè)計(jì)與實(shí)現(xiàn),揭開框架背后的秘密

進(jìn)入課程
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)