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"
                })
            });

你可能感兴趣的:(jquery,动画,javascript)