jquery中的事件和动画

jquery中的事件和动画

1.事件对象

Javascript中事件对象：window.event || ev (需要兼容火狐)

JQuery中事件对象:通过事件处理函数的参数传入 (已经处理好了兼容)

//常用的一些事件属性
$(document).click(function(ev){
     console.log(ev); //处理好兼容后的jquery事件对象
     console.log(ev.originalEvent);//MouseEvent  转换为DOM对象

     console.log(ev.clientX+"----------"+ev.clientY); // 相对于窗口
     console.log(ev.pageX+"----------"+ev.pageY); // 相对于页面


     console.log(ev.target); //事件目标
     console.log(ev.delegateTarget); //事件绑定的对象

     console.log(ev.shiftKey);//特殊键

});

2.事件冒泡和默认行为

Javascript中：需要兼容ie

​ 阻止事件冒泡:

​ ev.stopPropagation?ev.stopPropagation():ev.cancelBubble=true
​ 阻止默认行为：

​ return false :普通添加事件

​ ev.preventDefault?ev.preventDefault():ev.returnValue=false：事件绑定

JQuery中：

​ 阻止事件冒泡:ev.stopPropagation()

​ 阻止默认行为:return false(不管怎样添加的方式都可以用) ev.preventDefault()

        //1.点击按钮，让div显示
        $("button").click(function(ev){
            $("div").css("display","block");
            ev.stopPropagation();//如果不加阻止冒泡事件，div不会显示，隐藏事件会冒泡给显示事件
        });

        //2.点击页面空白部分，隐藏div
        $(document).click(function(){
            $("div").css("display","none");
        });



        $("a").click(function(){
            console.log("被点击了");
            return false;//阻止a标签跳转的默认行为
        })

3.事件绑定与取消

事件绑定：

​ 语法：
​ $(选择器).on(事件类型,事件处理函数)
​ 特点：
​ a.可以给同一个标签的同一个事件添加不同的处理函数
​ $(“div”).on(‘click’,fun);
​ $(“div”).on(‘click’,fun1);

​ b.可以给同一个标签的不同事件，添加同一个处理函数
​ $(“div”).on(‘click mouseover’,fun);

​ c.可以给一个标签同时添加多个事件
​ $(“div”).on({
​ “click”:fun,
​ “mouseover”:fun1
​ })

​ d.自定义事件

​ e.可以设置命名空间

事件取消 ：（所有的事件，都可以通过off取消）

​ 语法：

​ $(选择器).off(“事件类型”,“事件处理函数”);

        function fun(){
            console.log(this); //触发事件的对象
        }
        function fun1(){
            console.log(2); //触发事件的对象
        }

        $("div").on('click',fun);
        $("div").on('click',fun1);

        $("div").on('click mouseover',fun);

        $("div").on({
            "click":fun,
            "mouseover":fun1
        })

        $("button").on("abc",function(){
             console.log("我是一个自定义事件");
        })//需要自己手动调用
        $("button").trigger("abc");//使用trigger()方法调用自定义事件



        $("button").on("click.a",function(){
              console.log("fd");
        });

        $("button").on("click.b",function(){
              console.log("s");
        });



         $("button").off(); // 全部取消
         $("button").off("click"); // 取消固定类型
         $("button").off("click.a");

4.事件绑定one()

​ one()绑定的事件只执行一次

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

5.事件委托

  //原生js的事件委托
  var  oUl = document.getElementsByTagName("ul")[0];
  //把事件添加到父元素上，当事件发生的时候，会找到具体的子元素，处理事情
       oUl.onclick = function(ev){
            var ev = window.event||ev;
            //找到具体的子元素
            var target = ev.target || ev.srcElement;
            target.style.background = "red";
        }
        //事件可以发生在未来,后添加的子元素也具有之前添加的事件
        oUl.innerHTML += "<li>5</li>" 

JQuery事件委托：
语法：$(父元素).on(事件类型,子元素，事件处理函数)

$("ul").on('click',"li",function(){
   console.log(this); //触发事件的子元素
    $(this).css("background","red").siblings().css("background","");
});

 $("ul").append("<li>5</li>")//同样事件可以发生在未来

6.合成事件hover()

​ 语法：

​ $(“选择器”).hover(function(){}[滑入执行的函数],function(){}[滑出执行的函数])

        $("div").hover(function(){
            //移入
            $(this).css("background","red")//移入背景为红色
        },function(){
            //移出
            $(this).css("background","pink")//移除背景为粉色
        })

7.JQuery中的动画

(1)显示隐藏：show()、hide()、toggle() (运动的是宽高透明度)

语法：

​ 显示：show(speed[运动时间],easing[运动方式],callback[回调函数])

​ 隐藏：hide(speed[运动时间],easing[运动方式],callback[回调函数])

​ 开关效果：toggle(speed[运动时间],easing[运动方式],callback[回调函数])

参数：

​ speed: number(自定义) fast(200ms) normal(400ms) slow(600ms)

​ easing:linear[匀速] swing[慢快慢]

​ callback：运动做完以后执行的函数

    //以show举例
    div{
            width: 200px;
            height: 200px;
            background: skyblue;
            
        }
    <button>show</button>
    $("button").click(function(){
          $("div").show(2000,"linear",function(){
               console.log("饿吗");
           });
     });

(2)滑入滑出：slideDown()、slideUp()、slideToggle() (运动的是高)

语法：

​ 显示：$(选择器).slideDown(speed[运动时间],easing[运动方式],callback)

​ 隐藏：$(选择器).slideUp(speed[运动时间],easing[运动方式],callback)

​ 开关效果：$(选择器).slideToggle(speed[运动时间],easing[运动方式],callback)

参数：

​ speed: number(自定义) fast(200ms) normal(400ms) slow(600ms)

​ easing:linear[匀速] swing[慢快慢]

​ callback：运动做完以后执行的函数

   //以slideDown举例
   div{
            width: 200px;
            height: 200px;
            background: skyblue;
            display:none;
            
        }
    <button>slideDown</button>
    $("button").click(function(){
          $("div").slideDown(2000,"linear",function(){
               console.log("饿吗");
           });
     });

(3)淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo() (运动的是透明度)

语法：

​ 显示：$(选择器).fadeDown(speed[运动时间],easing[运动方式],callback)

​ 隐藏：$(选择器).fadeUp(speed[运动时间],easing[运动方式],callback)

​ 开关效果：$(选择器).fadeToggle(speed[运动时间],easing[运动方式],callback)

​ 透明到：$(选择器).fadeTo(speed[运动时间],透明度,easing[运动方式],callback)

参数：

​ speed: number(自定义) fast(200ms) normal(400ms) slow(600ms)

​ easing:linear[匀速] swing[慢快慢]

​ callback：运动做完以后执行的函数

 div{
            width: 300px;
            height: 300px;
            background: red;
            
     }
    <button>fadeOut</button>
    $("button").click(function(){
            $("div").fadeOut(2000);
    })
    $("#fadeTo").click(function(){
            $("div").fadeTo(1000,0.3);//运动到透明度为0.3停止
        })

(4)自定义动画

语法：

第一种:$(选择器).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";//点击一下div，div向右移动50px
            })    
        }) 

        //4.show  hide toggle 这些关键字可以直接作为目标值
        $("div").animate({"width":"toggle"});

        //5.动画连缀,css不是动画，不会加入动画队列，会跟队列中的第一个动画一起执行
        $("div").animate({"width":500})
                .animate({"height":500})
        $("div").css("background","green");
                    
        //6.若想要css效果按照顺序执行有两种方法
          //1.放在回调函数里
            $("div").animate({"width":500})
                .animate({"height":500},function(){
                    $("div").css("background","green");
             })
          //2.通过queue()函数解决
            $("div").animate({"width":500})
                .animate({"height":500})
                .queue(function(){
                    $("div").css("background","green");
                })
                .animate({"opacity":0.3});//透明度不会执行，都等着用queue()函数来排队
          //3.解决上述问题
            $("div").animate({"width":500})
                .animate({"height":500})
                .queue(function(next){ //传入一个参数
                    $("div").css("background","green");
                    //$("div").dequeue(); //出队  不建议使用
                    next();//保证在执行完这次队列后再执行队列中的下一个动画函数
                })
                .animate({"opacity":0.3})
 

queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始

//先运动宽再运动高最后运动透明度
$("div").animate({"width":500},{
         "duration":1000
     });
     $("div").animate({"height":500},{
         "duration":1000
     });

     $("div").animate({"opacity":0.4},{
         "duration":1000
     });

//若加上queue：false

$("div").animate({"width":500},{
         "duration":1000,
         "queue":false   //宽高一起运动，就是允许在运动宽的时候运动高
     });
     $("div").animate({"height":500},{
         "duration":1000
     });

     $("div").animate({"opacity":0.4},{
         "duration":1000
     });

8.停止元素的动画

语法：$().stop(clearQueue,gotoEnd)

参数：

​ clearQueue:是否清除动画队列中的所有动画

​ 默认是false:停止当前正在运动的动画，其他动画继续运行，true：停止所有动画

​ gotoEnd：停止动画的时候，当前正在运动的动画是否立刻到达目标点

​ 默认是false：立刻停止，true:立刻到达目标点

<button>开始动画</button>
<button>结束动画</button>
<div></div>
$("button:eq(0)").click(function(){
            $("div").animate({"width":500},1000);
            $("div").animate({"height":500},1000);
        })

$("button:eq(1)").click(function(){
            $("div").stop(false,true);
            $("div").stop();//没有参数的时候，默认只停止当前正在进行的运动，后续的运动继续
        })

​