jQuery04事件和动画

 一、事件

1.1 加载Dom两种方式：

                        ① 分为：window.onload方式：

                                     执行时间：整个网页中所有内容（包括图片）加载完成后，才会执行。

                                    能编写的个数： 一个页面只能有一个，多个只会被覆盖。

代码展示：

                               

结果：

                        

 

                               ② jQuery方式：

                                     执行时间：网页结构绘制完成后执行。

                                     能编写个数：多个每一个方法都能执行，且不会被覆盖。

代码展示：

                        ​​​​​​​        

 

效果如下：

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

 

                        ③ 版本区别：

                        jQuery3.0：window.onload比jQuery先执行

                        jQuery1.x和2.x：jQuery比window.onload先执行

1.2绑定事件两种方式：

                                ①元素.on/bind("事件名"，function(){})

                                代码展示：

                                 $("#aa").on("click",function(){
                                                    alert("嘿嘿");
                                    })

                                ②元素.事件名（function（）{}）

                                代码展示：

                                  $("#aa").click(function(){
                                                    alert("干哈")
                                    })

1.3合成事件/事件切换：

                                        ①hover( )：鼠标悬停合成事件

                                        代码展示：

                                        $("a").hover(function(){//鼠标移上
                                            $("#aa").show();//显示
                                        },function(){//鼠标移出
                                                   $("#aa").hide();//隐藏
                                          })

                                         ②toggle( )：鼠标点击合成事件

                                        代码展示：

                                        $("a").toggle(function(){//点击一下
                                                    $("#aa").show();//显示
                                        },function(){//再点一个
                                                    $("#aa").hide();//隐藏
                                         })

1.4事件传播（事件冒泡）

                                        ①传播方式：小----->中-------->大

                                        ②阻止传播：在事件后面加上return false

  案例：（小p——>中div——>大body）

        代码展示：

           

         body部分：

        

        

1.5移除事件：

                                        ①元素.unbind/off（"事件名"）

                                        代码展示：

                                        //将点击事件进行移除
                                            $("#btn").off("click");//unbind()
                                        //将按钮禁用
                                             $("#btn").attr("disabled",true);

                                        ②元素.one(event,data,fucntion)

                                        代码展示：

                                          $("#btn").one("click",function(){
                                                        console.info(44944);
                                            //将按钮禁用
                                            $("#btn").attr("disabled",true);
                                           })

                                    

二、jQuery动画

 2.1基本动画：

                hide：隐藏    show：显示

                ①控制元素的显示和隐藏

                代码展示：

                $("#aa").show(1000,function(){
                        //回调函数
                        alert("来了，老弟")
                    })

·                $("#yy").on("click",function(){
                    $("#aa").hide(2000);
                })

                   ②切换：toggle（）

                    代码展示：

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

            2.2滑动动画

                        sildeDown：向下滑动 slideup：向下滑动

                       代码展示：

                         $("#xx").on("click",function(){
                                    $("#aa").slideDown(1000)
                        })
                        $("#yy").on("click",function(){
                                    $("#aa").slideUp(2000);
                        })

                      切换：  toggle（）

                      代码展示：

                        $("#zz").click(function(){
                                    $("#zz").slideToggle(1000)
                        })

2.3淡入淡出效果

        fadeIn：淡入        fadeOut：淡出

        ①控制元素的淡入淡出效果

          代码展示：

               $("#xx").on("click",function(){
                    $("#aa").fadeIn(1000)
                })
                $("#yy").on("click",function(){
                    $("#aa").fadeOut(2000);
                })

         ②切换：toggle（）

                代码展示：

                $("#zz").click(function(){
                    $("#zz").fadeToggle(1000)
                })

2.4自定义动画

        语法：

          $(selected).animate（{params},speed,callback）;

          params 参数定义形成动画的CSS属性。

           speed参数规定效果的时长

          代码展示：

            $("#aa").animate({
                        width:100,
                        height:300
              },1000);