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很多次，电脑就会累计下来，即使你后⾯⿏标移开了，电脑也会继续运⾏，直到全部运⾏完，但你要是加上了stopPropaga ）
·当使⽤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种⽅法；
jquery弹出div窗口

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。