js（jQuery）tips

一：页面加上$(function(){***内容***})与不加的区别

1、这个是DOM加载完之后再加载JS代码，你的JS如果放在文档后面可能一样，但是如果你要是把JS放在head里面就有差别了（放在head里面的时候加上jquery包围 会正确执行，而不加上则会导致执行时没有找到相应dom而出错）。

2、如果不用，可能导致文档没有加载完毕就执行了代码，导致代码执行不正确。

二：self,this

1、self: 这个非常简单。我们知道，打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一个window对象，也是js运行所依附的全局环境对象和全局作用域对象。self 指窗口本身，它返回的对象跟window对象是一模一样的。也正因为如此，window对象的常用方法和函数都可以用self代替window。举个例子，常见的写法如“self.close();”，把它放在<a>标记中：“<a href="javascript:self.close();">关闭窗口</a>”，单击“关闭窗口”链接，当前页面关闭。

2、this: this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）;

 

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

1、bind

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

 

优点：
·这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案；
·非常方便简单的绑定事件到元素上；
·.click(), .hover()...这些非常方便的事件绑定，都是bind的一种简化处理方式；
·对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook（挂钩）上去(因为一个页面只有一个id),而且当事件发生时，handler（处理器）可以立即被执行(相对于后面的live, delegate)实现方式；

缺点：
·它会绑定事件到所有的选出来的元素上；
·它不会绑定到在它执行完后动态添加的那些元素上；
·当元素很多时，会出现效率问题；
·当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题； 

2、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（性能）问题；

3、delegate

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

优点：
·你可以选择你把这个事件放到那个元素上了；
·chaining被正确的支持了；
·jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素；
·可以用在动态添加的元素上；

缺点：
·需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找；

 

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