• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(五):jquery的几个复合事件

    JQuery学习记录(五):jquery的几个复合事件

    作者: 分类:JS应用 点击: 175 次
    wordpress CMS主题:ssmay主题

      所谓复合事件,是相对单一事件而言的,就是一组事件的组合,这种复合事件还是很有用的,如:下拉菜单,我们就可以采用鼠标移入和鼠标移出2个事件的组合来实现,当鼠标移入时就显示下拉菜单,当移出时就隐藏下拉菜单。jquery自身就带有几个复合事件,一起来看看吧。

      一:页面加载完触发事件:

      ready(fn):当整个页面DOM加载完后触发的事件,相当于javascript的window.onload。这个事件在我们使用jquery代码时,非常有用。很多情况下,我们会把jquery代码放在页面的头部,如果不使用这个事件的话,jquery代码就不会被页面使用。加了这个事件,页面会在加载完成后,调用这段jquery代码。如:

      $(document).ready(function(){
      alert("页面加载完后,调用这里。");
      });

      我们也可以把$(document).ready()用$代替,如下:

      $(function(){
      alert("页面加载完后,调用这里。");
      });

      二:鼠标移入移出事件

      hover(fn1,fn2):这个事件是指,当鼠标移入时,就触发fn1函数,移出时就触发fn2函数。这个在本章开头外介绍的类似。代码如下:

      $("div").hover(function(){
      alert("鼠标移入事件");
      },function(){
      alert("鼠标移出事件");
      });

      这样,当鼠标移入div模块时,就会弹出“鼠标移入事件”,当鼠标移出时就会弹出“鼠标移出事件”。这个复合事件,有很多地方可以用到,如:下拉菜单、显示隐藏提示内容等。

      还有一个被jquery1.9就抛弃了的复合事件toggle(fn1, fn2)——点击组合事件,当鼠标点击就触发fn1,再点击就触发fn2,再点击又触发fn1,再点击又触发fn2... 如果还想使用jquery1.9以前的版本,可以使用这个复合事件。如查想在jquery1.9以后的版本中也想实现这种复合点击效果,可以通过代码来实现,示例如下:

      var flag = 1; //计数器
      $('div').click(function () {
      if (flag == 1) { //第一次点击
      $(this).css('background', 'black');
      flag = 2;
      } else if (flag == 2) { //第二次点击
      $(this).css('background', 'blue');
      flag = 3
      } else if (flag == 3) { //第三次点击
      $(this).css('background', 'red');
      flag = 1
      }
      });

      jquery 的复合事件就介绍到这里。后期我们会继续介绍jquery的其它方面,敬请期待。哈哈。



      QQ二维码

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201808016401.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.