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种方法；