jQuery技术

jQuery教程:14个实用的jQuery技巧(4)

字号+ 作者:H5之家 来源:H5之家 2016-06-05 13:00 我要评论( )

jQuery教程:14个实用的jQuery技巧(4),文章

  网页制作Webjx文章简介:jQuery代码的14条改善技巧.
  
  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_itemsinput.in_stock')
  
  .removeClass('in_stock')
  
  .addClass('3-5_days');
  
  如果想让它更简单实用,你可以创建一个支持链结构的jQuery函数:
  
  $.fn.makeNotInStock=function(){
  
  return$(this).removeClass('in_stock').addClass('3-5_days');
  
  }
  
  $('#shopping_cart_itemsinput.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:2pxoutsetblack;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现在将渐隐并在完成动作之后开启渐显效果
  
  //slideuponceitcompletes
  
  $('#sliding').slideDown('slow',function(){
  
  $('#sliding').slideUp('slow',function(){
  
  //渐显效果完成后将会改变按钮的CSS属性
  
  $('div.button').css({borderStyle:"outset",cursor:"auto"});
  
  });
  
  });
  
  });
  
  });
  
  

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery中text(),val(),html()区别

    jquery中text(),val(),html()区别

    2016-06-06 12:00

  • jquery技巧之让jquery和prototype共存

    jquery技巧之让jquery和prototype共存

    2016-06-05 12:00

  • 6折局部包邮jQuery,jQuery UI及jQuery Mobile技巧与示例

    6折局部包邮jQuery,jQuery UI及jQuery Mobile技巧与示例

    2016-06-05 11:02

  • jquery配合css3动画学习

    jquery配合css3动画学习

    2016-06-05 10:00

网友点评