筆記 jQuery原始碼(文件處理3)

2021-09-14 00:36:56 字數 2762 閱讀 7722

今天是第四天啦!筆記的內容主要是跟著慕課網上的jquery原始碼解析系列課程以及自己的理解+實踐來寫的(也比較偏向於自己的梳理,所以可能會有點亂),可能會有錯誤,歡迎指出。

jquery對於dom操作常用的方法大概有以下幾種:

prepend

before

after

replacewith

prependto

insertbefore

insertafter

replaceall

其中這裡有些方法是對應的,但是它們的目標元素和被瞄準元素位置不一樣。

對於dom的移除有以下四種常用的方法:

比如after()insertafter()方法:

$('.inner').after('test

');$('test

').insertafter('.inner');

這部分課程講的不是特別清楚,所以直接搬出原始碼來看:

jquery.each( 

//可以看到其實insertafter和after其實本質是一樣的

, function( name, original )

//構建乙個新jquery物件,以便實現鏈式

return this.pushstack( ret );

};} );

return this.dommanip( arguments, function( elem )

});}

這裡用到了乙個manipulationtarget函式,用於處理向table元素加入tr但沒有tbody的情況,以下是它的原始碼:

function manipulationtarget( elem, content )
replacewidth方法對元素進行替換,呼叫的是原生的replacechild方法,因為涉及到「刪除」這個元素,所以會呼叫cleandata這個方法:

replacewith: function() 

});return arg && (arg.length || arg.nodetype) ? this : this.remove();

}

最後返回的指向也從原來的元素換成了替換後的元素。

然後再來瞅瞅這個cleandata所做的事情(水很深,就先大概了解一下):

cleandata: function( elems )  else }}

elem[ datapriv.expando ] = undefined;

}if ( elem[ datauser.expando ] ) }}

}

jquery.event.special中有load事件,focus事件,blur事件,click事件和beforeunload事件等等...裡面做了一些處理去彌補原本的不足。

innertext是常用的文字清理方法,火狐不相容,但提供了類似的textcontent方法。

兩者的區別

ie中的innertext是需要對innerhtml的值進行:

1.html轉義2.html解釋和css樣式解釋3.剔除格式資訊4.留下的純文字

而textcontent沒有2、3步,在經過了html轉義之後直接剔除所有html標籤後得到的純文字。

為了避免占有本該釋放的資源,所以jquery進行刪除前必須要先移除子元素的資料事件處理函式。。

empty: function() 

}return this;

}

jquery.cleandata方法:

通過元素判斷上繫結的expando的這個uuid在與之對應的cache中找到資料與事件控制代碼加以刪除。

.remove() 將元素移出dom,可以移除自身元素。

/*

* keepdata僅供jquery內部使用

*/remove: function(selector, keepdata )

//如果元素存在父親節點

if (elem.parentnode)

//移除元素 elem.parentnode.removechild(elem);}}

return this;

}

因為remove可能是移除自身,所以需要用父親元素來進行移除。

附加getall方法:

function getall( context, tag )
detach()方法移除被選元素,包括所有文字和子節點。但它保留jquery物件中的匹配的元素,因而可以在將來再使用這些匹配的元素,它也保留所有繫結的事件、附加的資料,這一點與remove() 不同。

所以它和remove方法不一樣的就是keepdata這個屬性,只要傳入true就可以了:

detach: function(selector)
這個方法可以用於刪除後又將會被新增進來的元素。

jQuery原始碼閱讀筆記

一 閉包結構 作用 消除全域性汙染 採用閉包 匿名函式立即執行 的方式,傳入了window物件 只在後面暴露 和 jquery 這 2 個變數給外界 方式1 function window,undefined window 方式2 function window window,undefined 方...

jQuery原始碼學習筆記

整個jquery是乙個自呼叫的匿名函式 1 function global,factory 9return factory w 10 11 else 14 typeof window undefined window this,function window,noglobal 自呼叫函式大家都不陌生...

jquery原始碼學習筆記二 jQuery工廠

筆記一裡記錄,jquery的總體結構如下 function global,factory typeof window undefined window this,function window,noglobal 那麼這個生成jquery的工廠是咋樣的?醬紫的 function window,nogl...