jQuery 动画和事件

<title>jQuery 事件和动画</title>
        <style type="text/css">
            #aa{
                width: 200px;
                height: 200px;
                background-color: yellow;
                position: absolute;
                top: 50px;
                left: 50px;
            }
            p{
                background: #00A8A8;
            }
            .abc{
                transform: rotate(360deg);
                transition: all 2s;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            
            /* jQuery第四次课 */
            
            /* 一、事件 */
            //1.1 加载DOM两种方式(区别)
            
            // js只能写一个其他会被覆盖
//             window.οnlοad=function(){
//                 console.info("js1");
//             }
//             window.οnlοad=function(){
//                 console.info("js2");
//             }
//             window.οnlοad=function(){
//                 console.info("js3");
//             }

            // 不会被覆盖都会执行
//             $(function(){
//                 console.info("jq1")
//             })
//             $(function(){
//                 console.info("jq2")
//             })
//             $(function(){
//                 console.info("jq3")
//             })
            
            
            $(function(){
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
                /* $("#aa").on("click",function(){
                    alert("aa")
                }) */
                
                /* $("#aa").bind("mouseover",function(){
                    alert("aa")
                }) */
                
                //--元素.事件名
                /* $("#aa").click(function(){
                    alert("hh")
                }) */
                
                /* $("#aa").mouseover(function(){
                    alert("hh")
                }) */
                
                //1.3 合成事件/事件切换
                //--hover()悬停控制元素[div]的显示和隐藏
                /* $("#aa").hide();    //隐藏    
                        $("a").hover(function(){
                            $("#aa").show();
                        },function(){
                            $("#aa").hide();
                        }) */
                        
                //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
                /* $("#aa").hide();    //隐藏    
                        $("a").toggle(function(){
                            $("#aa").show();
                        },function(){
                            $("#aa").hide();
                        }) */
                
                // $("#aa").toggle(1000);
                
                //1.4 事件的传播(事件冒泡) 小p->中div->大body
                // 依次添加点击事件
                /* $("p").click(function(){
                    console.info("p被点击")
                })
                $("div").click(function(){
                    console.info("div被点击")
                    return false;//阻止传播
                })
                $("body").click(function(){
                    console.info("body被点击")

                }) */
                
                
                //1.5 事件event的坐标[了解即可 pageX,pageY]
                /* $("#aa").on("click",function(e){
                    console.info(e.pageX,e.pageY);
                }) */
                

                //1.6 事件的移除
                //--按钮只能点击一次[2]
                /* $("#btn").click(function(){
                    console.info(44944);//做一系列事情
                    // 将该事件移除 off用法同
                    $("#btn").unbind("click")
                    // 将按钮禁用
                    $("#btn").prop("disabled",true);
                }) */
                
                // 一次事件
                /* $("#btn").one("click",function(){
                    console.info(44);
                    $("#btn").prop("disabled",true);
                }) */
                
                //--按钮点击偶数次可行 奇数次不行
                /* var i=1;
                $("#btn").click(function(){
                    if(i%2==0){
                        console.info(4432,i);
                    }
                    i++;
                }) */
                
                
                /* 二、动画 */
                //2.1 基本动画 [回调函数]
            /*     $("#aa").hide();//默认隐藏
                $("#xx").click(function(){
                    $("#aa").show(1000,function(){
                        //回调函数
                        alert("大焦点搜啊")
                    });
                })
                
                $("#yy").click(function(){
                    $("#aa").hide(2000);
                })
                
                $("#zz").click(function(){
                    $("#aa").toggle(2000);
                }) */
                
                //2.2 滑动动画
                /* $("#aa").hide();//默认隐藏
                $("#xx").click(function(){
                    $("#aa").slideDown(1000,function(){
                        //回调函数
                        alert("大焦点搜啊")
                    });
                })
                
                $("#yy").click(function(){
                    $("#aa").slideUp(2000);
                })
                
                $("#zz").click(function(){
                    $("#aa").slideToggle(2000);
                }) */
                //2.3 淡入淡出(透明度)
                /* $("#aa").hide();//默认隐藏
                $("#xx").click(function(){
                    $("#aa").fadeIn(1000,function(){
                        //回调函数
                        alert("大焦点搜啊")
                    });
                })
                
                $("#yy").click(function(){
                    $("#aa").fadeOut(2000);
                })
                
                $("#zz").click(function(){
                    $("#aa").fadeToggle(2000);
                }) */
                //2.4 自定义动画
                //--缩放
                /* $("#bb").click(function(){
                    $("#aa").animate({
                        width:100,
                        height:300
                    },1000);
                }) */
                //--移动[2]
                /* $("#bb").click(function(){
                    $("#aa").animate({
                        left:100,
                        top:200
                    },2000);
                }) */
                // 在自身基础上进行移动
                $("#bb").click(function(){
                    $("#aa").animate({
                        left:"+=5",
                        top:"+=10"
                    },1100);
                })
                
                /* $("#bb").click(function(){
                    // 给div增加样式
                    $("#aa").addClass("abc");
                }) */
                
            })
            
        </script>
    </head>
    <body>
        
        <a style="text-decoration: blink;" href="#" >显示</a>
        <input type="button" id="btn" value="点我试试" />
        <button id="xx">显示(展开 淡入)</button>
        <button id="yy">隐藏(收缩 淡出)</button>
        <button id="zz">显示/隐藏(展开/收缩 淡入/淡出)</button>
        <button id="bb">变变变</button>
        <div  id="aa">
            <br />
            <br />
            <br />
            <p>哈哈哈</p>
        </div>
    </body>
</html>