标题自己起 进来看像啥就是啥

Posted 2020-07-09 ☼柚子

 

 

那些繁琐的事件

 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 });

    });

  });

未完待续...