js（jQuery）tips

一：頁面加上$(function(){***內容***})與不加的區別

一、這個是DOM加載完以後再加載JS代碼，你的JS若是放在文檔後面可能同樣，可是若是你要是把JS放在head裏面就有差異了（放在head裏面的時候加上jquery包圍 會正確執行，而不加上則會致使執行時沒有找到相應dom而出錯）。

二、若是不用，可能致使文檔沒有加載完畢就執行了代碼，致使代碼執行不正確。

二：self,this

一、self: 這個很是簡單。咱們知道，打開任何一個網頁，瀏覽器會首先建立一個窗口，這個窗口就是一個window對象，也是js運行所依附的全局環境對象和全局做用域對象。self 指窗口自己，它返回的對象跟window對象是如出一轍的。也正由於如此，window對象的經常使用方法和函數均可以用self代替window。舉個例子，常見的寫法如「self.close();」，把它放在<a>標記中：「<a href="javascript:self.close();">關閉窗口</a>」，單擊「關閉窗口」連接，當前頁面關閉。

二、this: this一般指向的是咱們正在執行的函數自己，或者是指向該函數所屬的對象（運行時）;

 

三：事件綁定：bind-live-delegate-on

一、bind

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

 

優勢：
·這個方法提供了一種在各類瀏覽器之間對事件處理的兼容性解決方案；
·很是方便簡單的綁定事件到元素上；
·.click(), .hover()...這些很是方便的事件綁定，都是bind的一種簡化處理方式；
·對於利用ID選出來的元素是很是好的，不只僅是很快的能夠hook（掛鉤）上去(由於一個頁面只有一個id),並且當事件發生時，handler（處理器）能夠當即被執行(相對於後面的live, delegate)實現方式；

缺點：
·它會綁定事件到全部的選出來的元素上；
·它不會綁定到在它執行完後動態添加的那些元素上；
·當元素不少時，會出現效率問題；
·當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題； 

二、live

$( "#members li a" ).live( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

優勢：
·這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定；
·那些動態添加的elemtns依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上；
·你能夠在document ready以前就能夠綁定那些須要的事件；

缺點：
·從1.7開始已經不被推薦了，因此你也要開始逐步淘汰它了；
·Chaining沒有被正確的支持；

stopPropagation：（

假設你給一個div設置了hover事件，事件裏包括的function所執行的事件要2秒左右才能執行完一次，但你在這兩秒裏能夠hover不少次，電腦就會累計下來，即便你後面鼠標移開了，電腦也會繼續運行，直到所有運行完，但你要是加上了stopPropagation，當你的鼠標一一開div，事件就會當即終止，不會你什麼都不幹，電腦還在運行程序，提升了用戶體驗

）
·當使用event.stopPropagation()是沒用的，由於都要到達document；
·由於全部的selector/event都被綁定到document, 因此當咱們使用matchSelector方法來選出那個事件被調用時，會很是慢；
·當發生事件的元素在你的DOM樹中很深的時候，會有performance（性能）問題；

三、delegate

$( "#members li a" ).delegate( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

優勢：
·你能夠選擇你把這個事件放到那個元素上了；
·chaining被正確的支持了；
·jQuery仍然須要迭代查找全部的selector/event data來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素；
·能夠用在動態添加的元素上；

缺點：
·須要查找那個那個元素上發生了那個事件了，儘管比document少不少了，不過，你仍是得浪費時間來查找；

 

四、on

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

其實.bind(), .live(), .delegate()都是經過.on()來實現的，.unbind(), .die(), .undelegate(),也是同樣的都是經過.off()來實現的。

優勢：
·提供了一種統一綁定事件的方法；
·仍然提供了.delegate()的優勢，固然若是須要你也能夠直接用.bind()；

缺點：
·也許會對你產生一些困擾，由於它隱藏了一前面咱們所介紹的三種方法的細節；

 

最後結論：

·用.bind()的代價是很是大的，它會把相同的一個事件處理程序hook到全部匹配的DOM元素上；·不要再用.live()了，它已經再也不被推薦了，並且還有許多問題；·.delegate()會提供很好的方法來提升效率，同時咱們能夠添加一事件處理方法到動態添加的元素上；·咱們能夠用.on()來代替上述的3種方法；