zoukankan      html  css  js  c++  java
  • jQuery中的事件与动画

    1.鼠标事件

    click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时

    dblclick( ) 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时

    mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时 子元素有效

    mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 子元素有效

    mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 子元素无效

    mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时 子元素无效

    2.键盘事件

    keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时

    keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时

    keypress( ) 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时

    3.浏览器事件

    $(selector).resize( ); 改变浏览器窗口大小时触发

    4.绑定事件方式:

    on(),bind(),delegate(),live()

    5.复合事件

    hover(fn1,fn2) :鼠标移入移除

    toggle():显示和隐藏

    toggle(fn1....fnn)单击依照顺序触发

    6.动画:

    show(time,fn);

    hide(time,fn);

    fadeIn(time,fn); 淡入

    fadeout(time,fn); 淡出

    slideDown(time,fn); 逐步延伸

    slideUp(time,fn); 逐步缩短直至隐藏

    animate(样式,时间,执行函数)

    7.示例:

    <script type="text/javascript">
        //$(function((){})
            $(function(){
    
                /*绑定事件*/
                $("div").bind("mouseover",function(){
                   $("div").css("background","blue");
               }).bind("mouseout",function(){
                   $("div").css("background","");
               }); 
    
               /*  绑定多个,每一个中间,分隔*/
               $("div").bind({
                   mouseover:function(){
                       $("div").css("background","yellow");    
                   },
                   mouseout:function(){
                       $("div").css("background","red");
                   }
               });
                
               
               /*  解除绑定*/
               $("input").click(function(){
                   $("div").unbind("mouseout mouseover")
               })
            });
        </script>
  • 相关阅读:
    2018-10-20-WPF-通过位处理合并图片
    2019-2-11-WPF-获取应用的所有窗口
    2019-2-11-WPF-获取应用的所有窗口
    2018-8-10-WPF-如何在绑定失败异常
    2018-8-10-WPF-如何在绑定失败异常
    类和对象
    类和对象
    什么是可串行化MVCC
    LeetCode-环形链表|+环形链表||
    用js仿探探拖拽卡片的效果、飞卡片的效果,感觉挺酷,最后有美女看哦!
  • 原文地址:https://www.cnblogs.com/tinghao/p/11040315.html
Copyright © 2011-2022 走看看