jQuery-04 (事件&动画)

一.事件

1.1 加载Dom两种方式

①window.onload方式

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

• 编写个数：1个

  //1.1 加载DOM两种方式(区别)
          //原生态JavaScript加载DOM的方式
          //当网页全部加载完毕后才会执行的函数
          //该方式在一个页面上只能出现1次 如果出现多次 会覆盖
          window.onload=function(){
              alert(123);
          };
          
          //给定一个函数
          function myload(){
              alert(123);
          }
          
          //通过onload调用
          window.onload = myload();
          
          //添加事件监听的方法
          //该方式可以出现多次
          window.addEventListener('load',function(){
              alert(123);
          });
          
          window.addEventListener('load',function(){
              alert(45);
          });

② jQuery方式

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

• 编写个数：多个

  //jQuery的DOM加载
          //jQuery的DOm在一个页面上可以编写多个
          //1.完整写法
          $(document).ready(function(){
              alert(123);
          });
          //2.简写
          $(function(){
              alert(45);
          });

③ 两个都有情况下执行顺序

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

• jQuery1.0和2.0：jQuery比window.onload先执行

  //一个页面上同时出现原生态jsDom和jQueryDOM加载
          //版本不同，先后执行顺序不同 3.0版本以前--jQuery先
          //3.0版本以后--原生态js先
          $(function(){
              alert("jQuery");
          });
          window.onload=function(){
              alert("原生态js");
          };

1.2 绑定事件两种方式

① 元素.on(”事件名“，function(){})

//--元素.on()
        $("#oBtn1").on("click",function(){
            alert(123);
        });
//bind绑定
        $("#oBtn1").bind("click",function(){
            alert(45);
        });

② 元素.事件名(function(){})

 //--元素.事件名
        $("#oBtn1").click(function(){
            alert("上山打老虎");
        });

1.3 合成事件/事件切换

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

• 鼠标移上去第一个函数

• 鼠标移除第二个函数

   //--hover()悬停控制元素[div]的显示和隐藏
          $("#oDiv").hover(function(){
              $(this).addClass("over");
          },function(){
              $(this).removeClass("over");
          });

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

//--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
        $("#oBtn1").click(function(){
            //没有传递参数 调用后立即隐藏与显示
            //有参数（毫秒） 调用后 有延时效果
            // $("#oDiv").toggle(2000);
            $("#oDiv").toggle(function(){
                alert("隐藏了");
            },function(){
                alert("出现了");
            });
        });

1.4 事件传播(事件冒泡)

① 小 --> 中 --> 大

 //1.4 事件的传播(事件冒泡) 小p->中div->大body
        $("body").click(function(){
            alert(123);
        });

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

 //1.4 事件的传播(事件冒泡) 小p->中div->大body
        $("body").click(function(){
            alert(123);
        });

1.5 事件坐标

① offsetX: 当前元素左上角

//left和top body有默认的margin与padding值
            console.log(event.offsetX,event.offsetY);

② clientX：窗口左上角

//窗口
            console.log(event.clientX,event.clientY);

③ pageX ：网页左上角

//pageX 横坐标
            //pageY 纵坐标
            //鼠标
            console.log(event.pageX,event.pageY);

1.6 移除事件及案例

① 元素.unbind("事件名")

//--按钮只能点击一次[2]
        var flag = true;
        $("#oBtn3").click(function(){
            if(flag == true){
            alert(123);
            flag = false;
            }
            //一次性作用 通过调用解绑事件即可
            $(this).off();
            $(this).unbind();//解绑事件
        });
        
        //jQuery中提供一个方法 one
        $("#oBtn3").one("click",function(){
            alert(123);
        });
        
        //--按钮点击偶数次可行 奇数次不行
         var num=1;
        $("#oBtn3").click(function(){
            if(num % 2 == 0){
                alert("点击了"+num);
            }
            num++;
            alert(num);
        });

二.动画效果

2.1 基本

① 显示：show(Time )

//显示
        $("#b1").click(function(){
            $("#mydiv").show(3000);
        });

② 隐藏：hide(Time)

//隐藏
          $("#b2").click(function(){
             //$("mydiv").hide(); 没有参数 立刻隐藏
              $("#mydiv").hide(3000);
          });

③ 切换：toggle(Time)

//显示|隐藏
        $("#b3").click(function(){
            $("#mydiv").toggle(3000);
        });

2.2 滑动

① slideUp(Time)：动画收缩 (向上滑动) --> 隐藏

//向上滑
        $("#b4").click(function(){
            $("#mydiv").slideUp(3000);
        });

② slideDown(Time)：动画展开 (向下滑动) --> 显示

//向下滑
        $("#b5").click(function(){
            $("#mydiv").slideDown(3000);
        });

③ slideToggle(Time)：动画切换

//滑动上下
        $("#b6").click(function(){
            $("#mydiv").slideToggle(3000);
        });

2.3 淡入淡出 (透明度)

① fadeln(Time)：淡入(透明度减少)

$("#b8").click(function(){
            $("#mydiv").fadeIn(3000);
        });

② fadeOut(Time)：淡出(透明度增大)

$("#b7").click(function(){
            $("#mydiv").fadeout(3000);
        });

③ fadeToggle(Time)：切换

$("#b9").click(function(){
            $("#mydiv").fadeToggle(3000);
        });

2.4 自定义动画

① 元素.animate({属性：属性值},Time)

$("#b10").click(function(){
            $("#mydiv").animate(){
                width:"500px",
                height:"500px"
            },3000);
        });

② 缩放

• width

• height

  $("#b10").click(function(){
              $("#mydiv").animate(){
                  width:"500px",
                  height:"500px"
              },3000);
          });

③ 移动 (本元素)，距离

• top = "+="

• left = "-="

  $("#b11").click(function(){
              $("#mydiv").animate(){
                  left:"+=50px",
                  top:"+=50px"
              })
          });