jquery中的事件和动画

阻止事件冒泡 阻止默认行为

原生js：
阻止事件冒泡：ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true
阻止默认行为：return false  ev.preventDefault?ev.preventDefault():ev.returnValue=false

jquery:
阻止事件冒泡:ev.stopPropagation()
阻止默认行为:return false  ev.preventDefault()

事件绑定

  事件绑定：
            //on off
            $(选择器).on(事件类型,事件处理函数)
            特点：
                可以给同一个标签的同一个事件添加不同的处理函数
                $("div").on('click',fun);
                $("div").on('click',fun1);

                可以给同一个标签的不同事件，添加同一个处理函数
                $("div").on('click mouseover',fun);


                可以给一个标签同时添加多个事件
                  $("div").on({
                    "click":fun,
                    "mouseover":fun1
                })
 事件取消：
                $(选择器).off("事件类型","事件处理函数");
                  //取消事件，所有的事件，都可以通过off取消
               //$("button").off(); // 全部取消
              //$("button").off("click"); // 取消固定类型

事件委托

 事件委托：
            $(父元素).on(事件类型,子元素，事件处理函数)
        
        */
       $("ul").on('click',"li",function(){
           console.log(this); //触发事件的子元素
           $(this).css("background","red").siblings().css("background","");
       });

       $("ul").append("<li>5</li>")

one

  //只触发一次
        $("button").one("click",function(){
            console.log("谢谢惠顾");
        });

hover

  //$("div").hover(funOver,funOut)
        $("div").hover(function(){
            //移入
            $(this).css("background","red")
        },function(){
            //移出
            $(this).css("background","pink")

显示 隐藏

/*运动宽高，透明度   hide（）  show（）  toggle（） 
           hide(speed[运动时间],easing[运动方式],callback[回调函数])
           speed: number fast 
           easing:linear    swing[慢快慢]
           callback：运动做完以后执行的函数 

        */
       $("#hide").click(function(){
           $("div:eq(0)").hide(2000,"linear",function(){
               console.log("饿吗");
           });
        //    $("div:eq(1)").hide(2000,"swing");
       });


       $("#show").click(function(){
           $("div").show(2000);
       });


       $("#toggle").click(function(){
         $("div").toggle(1000);
       });

淡入淡出

 淡入淡出(透明度)
            fadeIn，fadeOut，fadeToggle，fadeTo  
             /* 
        $(选择器).slideDown(speed[运动时间],easing[运动方式],callback)
        speed：number  400
        easing：linear swing
        callback:回调函数，运动完成后调用

        fadeTo(speed,to,easing,callback)
        */

        $("#fadeOut").click(function(){
            $("div").fadeOut(2000);
        })

        $("#fadeIn").click(function(){
            $("div").fadeIn(2000);
        })

        $("#fadeToggle").click(function(){
            $("div").fadeToggle(2000);
        })

        $("#fadeTo").click(function(){
            $("div").fadeTo(1000,0.3);
        })
      

滑入滑出

  /* 
  滑入滑出（高度）slideUp（）  slideDown（） slidetoggle（）
        $(选择器).slideDown(speed[运动时间],easing[运动方式],callback)
        speed：number  400
        easing：linear swing
        callback:回调函数，运动完成后调用
        */
       $("#slideUp").click(function(){
           $("div").slideUp(1000);
       })

       $("#slideDown").click(function(){
           $("div").slideDown(1000);
       })

       $("#slidetoggle").click(function(){
           $("div").slideToggle(1000);
       })

自定义动画

/* 
    自定义动画：
    第一种:$(选择器).animate({运动参数},speed[400],easing,callback)
    第二种:$(选择器).animate({运动参数},{options})
        duration - 设置动画的速度
        easing - 规定要使用的 easing 函数
        callback - 规定动画完成之后要执行的函数
        step - 规定动画的每一步完成之后要执行的函数
        queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
        specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
        
    */

        //1.动画队列，每一个animate都会主动加入动画队列，然后按顺序进行动画
        /* $("div").animate({"width":500});
        $("div").animate({"height":500}); */

        //2.同时运动     
        //$("div").animate({"width":500,"height":500});

        //3.累加 
        /* $("div").click(function(){
            $("div").animate({
                "left":"+=50"
            })    
        }) */


        //5.动画连缀,css不是动画，不会加入动画队列，会跟队列中的第一个动画一起执行
        $("div").animate({"width":500})
                .animate({"height":500})
                .queue(function(next){ //
                    $("div").css("background","green");
                    //$("div").dequeue(); //出队  不建议使用
                    next();
                })
                .animate({"opacity":0.3});
                

stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button>开始动画</button>
    <button>结束动画</button>
    <div></div>

    <script src="jquery-1.11.3.min.js"></script>
    <script>
        /* 
        $().stop(clearQueue,gotoEnd)
        clearQueue:是否清除动画队列中的所有动画，
            默认是false:停止当前正在运动的动画，其他动画继续运行  
            true：停止所有动画
        gotoEnd：停止动画的时候，当前正在运动的动画是否立刻到达目标点
            默认是false：立刻停止
            true:立刻到达目标点
        
        */
    
        $("button:eq(0)").click(function(){
            $("div").animate({"width":500},1000);
            $("div").animate({"height":500},1000);
        })

        $("button:eq(1)").click(function(){
            $("div").stop(false,true);
        })
    </script>
</body>
</html>

图片漂浮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 100px;
            border: 1px solid;
            float: left;
            position: relative;
            overflow: hidden;
        }

        .box img{
            position: absolute;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="imgs/img1.png" alt="">
    </div>
    <div class="box">
        <img src="imgs/img1.png" alt="">
    </div>
    <div class="box">
        <img src="imgs/img1.png" alt="">
    </div>
    <div class="box">
        <img src="imgs/img1.png" alt="">
    </div>
    <div class="box">
        <img src="imgs/img1.png" alt="">
    </div>

    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $("div").hover(function(){
            $(this).children("img").stop().animate({"left":-40});

        },function(){
            $(this).children("img").stop().animate({"left":0});
        })
    </script>
</body>
</html>

递归

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 700px;
            background: pink;
            float: left;
            margin-right: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $("div:eq(0)").slideDown(500,function next(){
            //下一个div显示
            $(this).next().slideDown(500,next);
        });

        //递归：函数内部调用函数本身,一定要有结束递归的条件
        function jiec(n){
            if(n<=1) return 1;
            return n*jiec(n-1);
        }
        console.log(jiec(6));


        /* 
      
            return 6*jiec(5)    6*5*4*3*2*1
                        return 5*jiec(4)  5* 4*3*2*1
                                 return 4*jiec(3) 4*3*2*1
                                          return 3*jiec(2)  3*2*1
                                                    return 2*jiec(1)  2*1
                                                             return 1
        
        */
    </script>
</body>
</html>

来源：CSDN

作者：yee只鸟儿.

链接：https://blog.csdn.net/yeee1128/article/details/103605496