【皇甫】☀标题自己起进来看像啥就是啥

最新推荐文章于 2024-11-08 17:24:22 发布

weixin_30411819

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangxiangxiang/p/5514313.html

版权

那些繁琐的事件

window事件

常用的Window事件有文档就绪事件，它对应的方法是ready().

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的时间，常用的鼠标事件如下：

------------------------------------------------

　　　　事件　　　　执事时机

　　　　chick　　　　单击鼠标时

　　　　mouseover　　鼠标移过

　　　　mouseout 　　鼠标移出时

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用的键盘事件有:

-------------------------------------------------

　　　　事件　　执行时机

　　　　keydown 按下键盘时

　　　　keyup 　释放键盘时

　　　　keypress 产生可打印的字符时　

-------------------------------------------------

获取用户按下的按键对应的keycode

       $("input").keydown(function (event) {

                var keycode = event.which;

                alert(keycode);

            });

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件

<script type="text/javascript">

  $(function(){

  

    $("input").focus(function(){

      $(this).addClass("myred");

    });

    

   $("input").blur(function(){

      $(this).removeClass("myred");

    });

    

  });

</script>

绑定and移除事件

绑定事件

除了使用事件名绑定事件外，还可以使用bind()方法。

eg:绑定click事件

$("input[name=event_1]").bind("click",function() {

    $("p").css("background-color","#F30");

});

绑定多个事件

  $("[type=button]").bind({

                            mouseover: function() {

                                $("#myul").css("display", "none");

                            },

                            mouseout: function() {

                                $("#myul").css("display", "block");

                            }

                        });

移除事件

移除事件使用unbind()方法，其语法如下：

Unbind([type],[fn])

注意：当unbind()不带参数时，表示移除所绑定的全部事件

function t1() {

                $(this).css("background","pink");

            }

            function t2() {

                $(this).css("background", "white");

            }

         $(function(){

             //DOM2级绑定方式(借助外界方法)bind()  live()

             //DOM0级绑定方式（直接用事件名称）

             $("li").bind({

                 mouseover:t1,

                 mouseout: t2

             });

        

             //如何移除多个事件,不能使用无参的unbind

             $("li").unbind({ "mouseover": t1, "mouseout": t2 });

         });

鼠标光标悬停事件

Hover()方法相当于mouseover与mouseout事件的组合。

白话理解：可以在hover方法中扔两个参数，每个参数都是一个方法。实现对应的样式控制。

05.鼠标连续click事件

Toggle()方法用于模拟鼠标连续click事件，如果toggle没有参数，含义就是显示和隐藏的组合。

Jquery动画效果

显示及隐藏元素show()和hide()

$(".tipsbox").show("slow");

切换元素可见状态 toggle()

$("li:gt(5):not(:last)").toggle();

淡入淡出效果

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

改变元素的高度

slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

复杂动画animate()

$(function(){

    $("[type=button]").bind("click",function(){

     //队列：

     $("div").animate({

    width: "90%",

    height: "100%"

  }, 5000 ).animate({

    fontSize: "20px",

    borderWidth: 10

  },{ queue: false,duration: 5000 });

    });

  });