jQuery_事件&动画

文章目录

• 一、事件
• 二、动画
• 总结

---

一、事件
（1）加载Dom两种方式
 window.onload
个人理解概述：

   执行完其他代码，最后执行该括号内的代码。（只能写一个）

代码如下（示例）：

         

   // window.onload=function(){
            //     alert(123);
            // };

jQuery方法
个人理解概述：

   执行完其他代码，最后执行该括号内的代码。(可以写多个)

代码如下（示例）：

           

$(function(){
            alert(123)
            });

（2）绑定事件两种方式
 元素.on("事件名"，function（）{})
代码如下（示例）：

           

 $("#oBtn1").on('click', function() {
                    alert(123);
                });

 元素.事件名(function（）{})
代码如下（示例）：

              

 $("#oBtn1").click(function() {
                    alert('呵呵')
                });

 （3）合成事件/事件切换
hover
概述：

   鼠标悬停合成事件

代码如下（示例）：

           

 $("#oDiv").hover(function() {
                $(this).addClass("over")
            }, function() {
                $(this).removeClass('over')
            });
toggle

概述：

鼠标点击合成事件

代码如下（示例）：

  $("#oBtn2").click(function() {
                //没有传递参数 调用后立刻隐藏与显示
                //有参数（毫秒 调用后 有延时效果）
                //$("#oDiv").toggle(1000);
                $("#oDiv").toggle(function() {
                    alert("隐藏了！我出现了");
                }, function() {
                    alert('我出现了')
                });
            });

 （4）事件传播（事件冒泡）
传播
概述：

  小-->中-->大

代码如下（示例）：

                

$("body").click(function(){
                alert(123);
            });

组织传播
概述：

  事件后面加上 return false

代码如下（示例）：

     

        
            $("#oBtn2").click(function(){
                alert(456);
                return false;//组织事件传播
            });

 （5）事件坐标
 offsetX
概述：

当前元素左上角

代码如下（示例）：

           

$("body").click(function(){
                //pagex横坐标
                //鼠标
                console.log(event.pageX,event.pageY);
                //left和top
                console.log(event.offsetX,event.offsetY);
                //窗口
                console.log(event.clientX,event.clientY);
            });
clientX

概述：

   窗口左上角

代码如下（示例）：

         

   $("body").click(function(){
                //pagex横坐标
                //鼠标
                console.log(event.pageX,event.pageY);
                //left和top
                console.log(event.offsetX,event.offsetY);
                //窗口
                console.log(event.clientX,event.clientY);
            });
pageX

 

概述：

   网页左上角

代码如下（示例）：

       

$("body").click(function(){
                //pagex横坐标
                //鼠标
                console.log(event.pageX,event.pageY);
                //left和top
                console.log(event.offsetX,event.offsetY);
                //窗口
                console.log(event.clientX,event.clientY);
            });

（6）移出事件
代码如下（示例）：

         

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

二、动画效果
（1）基本
显示、隐藏、切换

代码如下（示例）：

        

//隐藏
          $("#b2").click(function(){
             //$("mydiv").hide(); 没有参数 立刻隐藏
              $("#mydiv").hide(3000);
          });
        //显示
        $("#b1").click(function(){
            $("#mydiv").show(3000);
        });
        //显示|隐藏
        $("#b3").click(function(){
            $("#mydiv").toggle(3000);
        });

 （2）滑动
slideUp(Time)——动画收缩、SlideDown(Time)——动画展开、slidetoggle（Time）——动画切换

代码如下（示例）：

         

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

 （3）淡入淡出（透明度）
fadeIn(Time)——淡入（透明度减少）

fadeOut(Time)——淡出（透明度增大）

fadeToggle(Time)——切换

代码如下（示例）：

  

 $("#b7").click(function(){
            $("#mydiv").fadeout(3000);
        });
        
        $("#b8").click(function(){
            $("#mydiv").fadeIn(3000);
        });
        
        $("#b9").click(function(){
            $("#mydiv").fadeToggle(3000);
        });

 （4）自定义动画
代码如下（示例）：

        

//--缩放
        $("#b10").click(function(){
            $("#mydiv").animate(){
                width:"500px",
                height:"500px"
            },3000);
        });
        
        
        //--移动[2]
        $("#b11").click(function(){
            $("#mydiv").animate(){
                left:"+=50px",
                top:"+=50px"
            })
        });

总结