9.绑定jQuery函数到$(window).load事件

大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
 // 将你希望在页面完全就绪之后运行的代码放在这里
});

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

$('#shopping_cart_items input.in_stock')
    .removeClass('in_stock')
    .addClass('3-5_days');

如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：

$.fn.makeNotInStock = function() {
    return $(this).removeClass('in_stock').addClass('3-5_days');
}
 
$('#shopping_cart_items input.in_stock').makeNotInStock().log();

11.使用回调函数同步效果

如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：slideDown( speed, [回调] ) ie. $(’#sliding’).slideDown(’slow’, function(){… 点击这里预览这个例子.

<style>
 div.button    { background:#cfd; margin:3px; width:50px;
   text-align:center; float:left; cursor:pointer;
   border:2px outset black; font-weight:bolder; }
 #sliding      { display:none; }
</style>

$(document).ready(function(){
// 使用jQuery的click事件改变视觉效果，并开启滑动效果
 $("div.button").click(function () {
   //div.button 现在看上去是按下的效果
   $(this).css({ borderStyle:"inset", cursor:"wait" });
   //#sliding 现在将渐隐并在完成动作之后开启渐显效果
   //slideup once it completes
   $('#sliding').slideDown('slow', function(){
     $('#sliding').slideUp('slow', function(){
       //渐显效果完成后将会改变按钮的CSS属性
       $('div.button').css({ borderStyle:"outset", cursor:"auto" });
     });
   });
 });
});

出处：彬Go
责任编辑：bluehearts

上一页 jQuery代码的14条改善技巧 [3] 下一页 jQuery代码的14条改善技巧 [5]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。