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

章節(jié)
問答
課簽
筆記
評(píng)論
占位
占位

深入domManip(上)

針對(duì)節(jié)點(diǎn)的操作有幾個(gè)重點(diǎn)的細(xì)節(jié):

  1. 保證最終操作的永遠(yuǎn)是dom元素,瀏覽器的最終API只認(rèn)識(shí)那么幾個(gè)接口,所以如果傳遞是字符串或者其他的,當(dāng)然需要轉(zhuǎn)換
  2. 針對(duì)節(jié)點(diǎn)的大量操作,我們肯定是需要引入文檔碎片做優(yōu)化的,這個(gè)必不可少

我們知道jQuery的的接口是支持多種參數(shù)傳遞的,那么就需要有一個(gè)過濾器的中介來處理各種參數(shù)類型。

這個(gè)任務(wù)就交給了domManip,除此之外domManip在設(shè)計(jì)上需要做的處理:

1:解析參數(shù),字符串,函數(shù),對(duì)象
2:針對(duì)大數(shù)據(jù)引入文檔碎片處理
3:如果參數(shù)中包含script的處理

其中還有很多細(xì)節(jié)的問題:

1:IE下面innerHTML會(huì)忽略沒作用域元素,no-scope element(script,link,style,meta,noscript)等,所以這類通過innerHTML創(chuàng)建需要加前綴

2:innerHTML在IE下面會(huì)對(duì)字符串進(jìn)行trimLeft操作,去掉空白

3: innerHTML不會(huì)執(zhí)行腳本的代碼,如果支持defer除外

4:很多標(biāo)簽不能作為div的子元素、td、tr, tbody等等

5:jQuery是合集對(duì)象,文檔碎片的與事件的復(fù)制問題

 

針對(duì)innerHTML不會(huì)執(zhí)行腳本的代碼,如果支持defer除外的解釋:

div.innerHTML = "<script>alert(1)</srcript>" 這個(gè)代碼不會(huì)執(zhí)行

例外的情況:IE9之前滿足幾個(gè)條件

1:script設(shè)定defer屬性

2: script元素必須位于有作用域元素之后,因?yàn)閟cript被認(rèn)為是無作用域的(頁面中不可見)

換句話說,這樣設(shè)置

div.innerHTML = "<div><script defer>alert(1)</srcript></div>"  可以執(zhí)行

jQuery在內(nèi)部通過會(huì)有一個(gè)domManip方法,把這些問題都方方面面處理掉了

 

綜合上面一系列的問題,jQuery引入了domManip方法

原因清楚了,我們?cè)賮砜磈Query是如何處理tbody問題,jQuery是兼容IE 6瀏覽器的。append、prepend、before和after都是操作Dom元素的函數(shù),如果被插入的對(duì)象是table,那就要在table中加入tbody標(biāo)簽啊

所以domManip,主要是處理這個(gè)問題的,他還處理插入元素的順序等等

在結(jié)構(gòu)上首先用extend在原型上拓展了一堆方法,其實(shí)每一個(gè)的實(shí)現(xiàn)都很簡(jiǎn)單,重點(diǎn)就是要看懂domManip的使用。可以重點(diǎn)挑兩個(gè)方法的實(shí)現(xiàn)看一看,不用每個(gè)都看。

然后就是appendTo和append之類的處理,大同小異,因?yàn)閷?shí)現(xiàn)差不多,所以就放在一起了

jQuery.fn.extend({ 
     text: function() {}, 
     append: function() {}, 
     prepend: function() {}, 
     before: function() {}, 
     after: function() {}, 
     clone: function() {}, 
     html: function() {},   
     replaceWith: function() {},  
     domManip: function() {},  
})

其中append方法:

append: function() {
    return this.domManip(arguments, function(elem) {
        if (this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9) {
            var target = manipulationTarget(this, elem);
            target.appendChild(elem);
        }
    });
}

1:函數(shù)調(diào)用了domManip函數(shù),傳進(jìn)去的參數(shù)第一個(gè)是arguments,這個(gè)大家都知道arguments是函數(shù)參數(shù)對(duì)象,是一個(gè)類數(shù)組對(duì)象。這里arguments可能是包含dom元素的數(shù)組,或者h(yuǎn)tml字符串

2:第二參數(shù)是一個(gè)回調(diào)函數(shù),target.appendChild(elem);看到這個(gè)代碼就很明了,在回調(diào)函數(shù)中分離各自的處理方法,通過domManip抽象出公共的處理,其余的prepend 、before 、after等接口也是類似的處理

任務(wù)

?不會(huì)了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請(qǐng)驗(yàn)證,完成請(qǐng)求

由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求

加群二維碼

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復(fù)提醒
  • · 賬號(hào)支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請(qǐng)您關(guān)注公眾號(hào)
關(guān)注后,及時(shí)獲悉本課程動(dòng)態(tài)

舉報(bào)

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費(fèi)2個(gè)積分

你的積分不足,無法發(fā)表

為什么扣積分?

本次提問將花費(fèi)2個(gè)積分

繼續(xù)發(fā)表請(qǐng)點(diǎn)擊 "確定"

為什么扣積分?