JQuery事件与动画

一、绑定事件的方式

---

1、事件绑定的快捷方式

缺点：绑定的事件，无法取消

$("button").eq(0).click(function(){
    alert(1);
})

2、使用on()绑定事件

① 使用on进行单事件绑定 

                $("button:eq(0)").on("click",function(){
                    alert(1);
                });

② 使用on：一次性给同一节点添加多个事件，执行同一函数，多个事件之间空格分隔

                $("button:eq(0)").on("click mouseover dblclick",function(){
                    console.log("触发了事件");
                });

③ 使用on：一次性给同一节点添加多个事件，分别执行不同函数*/

                $("button:eq(0)").on({
                    "click":function(){
                        console.log("执行了click事件");
                    },
                    "mouseover":function(){
                        console.log("执行了mouseover事件");
                    }
                });

④ 调用函数时，同时给函数传入指定参数

                $("button:eq(0)").on("click",{name:"jredu",age:14},function(evn){
                    console.log(evn);
                    console.log(evn.data.name);
                    console.log(evn.data.age);
                });

⑤ 使用on：进行事件委派：

>>> 将原本需要绑定在本元素上的事件，改为绑定到祖先节点乃至根节点上，然后委派给当前节点生效

     eg：$("p").on("click",function(){});

                  ↓ (事件委派)

              $(document).on("click","p",function(){});

 

>>> 作用：

不使用事件委派的绑定方式，只能绑定到页面初始化时的标签上，当页面新增同类型标签，这些新增标签，不能够绑定上事件；

但如果使用事件委派，当页面新增同类型标签时，这些新增标签也能够绑定上已有的事件。

                $("button:eq(0)").on("click",function(){
                    $(this).after("<p>这是新增的p标签</p>");
                });
                
                $("p").on("click",function(){
                    alert("没有事件委派");
                });
                
                $(document).on("click","p",function(){
                    alert("这是事件委派");
                });

off()取消on事件绑定

$("p").off("click");  取消单事件绑定

$("p").off("click mouseover dblclick");  取消多事件绑定

$(document).off("click","p");  取消事件委派绑定

$("p").off();  取消所有的事件绑定

 

 使用.one()绑定的事件，只能执行一次；

                $("button").one("click",function(){
                    alert("我只能与大家见一面");
                });

 

3、.trigger()：自动触发某元素的事件。

第一个参数：需要触发的事件类型；

第二个参数：(可选)数组格式，表示传递给对应事件函数的参数。

>>> 传递进来的参数，可以在事件函数中，定义形参获取(形参第一个必须是event事件，从第二个开始为传递的参数。)

>>> 也可以直接在函数中，使用arguments对象数组，读取参数。

.triggerHandler()：功能同上，区别如下：

 ① triggerHandler 不能够触发浏览器默认的HTML事件，如submit等；

      trigger 可以触发任何的事件；

 ② trigger 可以触发页面中所有匹配元素的事件；

      triggerHandler 只能触发第一个匹配元素的事件；

 ③ trigger的返回值，返回的是调用当前函数的对象，符合JQuery的可链式语法；

     triggerHandler返回的是事件函数的返回值，如果事件函数没有返回值，则范围  Undefined；

                $("p").on("click",function(evn,n1,n2){
                    for (var i=1;i<arguments.length;i++) {
                        console.log(arguments[i]);
                    }
                    //alert("这是p标签的click事件,你传递了参数"+n1+"和"+n2);
                });
                $("p").trigger("click",["jredu",12]);
                
                setTimeout(function(){
                    alert("时间截止，自动交卷");
                    $("form").trigger("submit");
                },5000);

二、JQuery动画

---

1、.show() 让隐藏的元素显示。效果为：同时修改宽度、高度、opacity属性。

① 不传参：直接显示，不进行动画；

② 参数时间毫秒数，表示多少毫秒内完成函数；

③ 传入(时间,函数)表示动画完成之后，执行回调函数；

.hide() 让显示的元素隐藏，与show相反

 

.slideDown() 让隐藏的元素显示，效果为从上往下，增加高度；

.slideUp() 让显示的元素隐藏，效果为从下往上，减小高度；

.slideToggle() 让显示的元素隐藏，让隐藏的元素显示；

 

.fadeOut() 让显示的元素淡出隐藏，修改透明度；

.fadeIn() 让隐藏的元素淡入显示；

.fadeToggle() 让显示的元素隐藏，让隐藏的元素显示；

.fadeTo(时间,最终透明度,函数) 同fadeToggle，接收第二个参数，表示最终到达的透明度。

                $("#p").show(2000,function(){
                    $("#p").hide(2000);
                });
                setInterval(function(){
                    $("#p").show(2000,function(){
                        $("#p").hide(2000);
                    });
                },4000);
                
                $("#p").slideDown(2000,function(){
                    $("#p").slideUp(2000);
                });
                setInterval(function(){
                    $("#p").slideToggle(1000);
                },2000);
                
                $("#p").fadeIn(2000,function(){
                    $("#p").fadeOut(2000);
                });
                $("#p").fadeTo(2000,0.5,function(){});

2、自定义动画

.animate({最终的样式属性，键值对对象},

动画时间,

动画效果("linear","swing"),

动画执行完成后的回调函数)

自定义动画注意事项：

① 参数一的对象中，键必须使用驼峰命名法。{fontSize : "18px"}

② 只有数值类型的属性能够使用动画，非数值类型属性不能应用动画。

                $("#p").animate({
                    "300px",
                    opacity:"0.5"
                },2000,"linear",function(){
                    alert("动画完成了");
                });