今天是第四天啦!筆記的內容主要是跟著慕課網上的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的值進行:為了避免占有本該釋放的資源,所以jquery進行刪除前必須要先移除子元素的資料和事件處理函式。。1.html轉義;2.html解釋和css樣式解釋;3.剔除格式資訊;4.留下的純文字。
而textcontent沒有2、3步,在經過了html轉義之後直接剔除所有html標籤後得到的純文字。
empty: function()
}return this;
}
jquery.cleandata方法:.remove() 將元素移出dom,可以移除自身元素。通過元素判斷上繫結的expando的這個uuid在與之對應的cache中找到資料與事件控制代碼加以刪除。
/*
* 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...