jQuery04:事件&动画

一、事件 

函数部分
            //1.1 加载DOM两种方式(区别)
            //js 不可以写多个 多个会被覆盖
            /* window.οnlοad=function(){
                 console.info("js方式1");
             }
            window.οnlοad=function(){
                console.info("js方式2");
            }
            window.οnlοad=function(){
                console.info("js方式3");
            } */
            //jQuery方式 可以写多个 并且都会被执行
            /* $(function(){
                console.info("jQuery方式1");
            })
            $(function(){
                console.info("jQuery方式2");
            })
            $(function(){
                console.info("jQuery方式3");
            }) 
            
            
            $(function(){
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
                //on()
                /* $("#aa").on("click",function(){
                    alert("干啥");
                }) */
                //bind()
                /* $("#aa").bind("click",function(){
                    alert("干啥");
                }) */
                //--元素.事件名
                /* $("#aa").click(function(){
                    alert('干啥');
                }) */
                
                //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").click(function(e){
                    console.info(e.pageX,e.pageY);
                }) */
                
                //1.6 事件的移除
                //--按钮只能点击一次[2]
                /* $("#btn").on("click",function(){
                    //做一列事情
                    console.info("44944");
                    //将点击事件进行移除
                    $("#btn").off("click")//unbind()
                    //将按钮禁用
                    $("#btn").attr("disabled",true);
                }) */
                
                //一次
                /* $("#btn").one("click",function(){
                    console.info(44944);
                    //将按钮禁用
                    $("#btn").attr("disabled",true);
                }) */
                
                //--按钮点击偶数次可行 奇数次不行
                /* var i = 1;
                $("#btn").click(function(){
                    if(i%2==0){
                        console.info(44944,i);//做一系列事情
                    }
                    i++;
                }) */

二、动画

                //2.1 基本动画 [回调函数]
                /* $("#aa").hide();//默认隐藏
                $("#xx").on("click",function(){
                    $("#aa").show(1000,function(){
                        //回调函数
                        alert("来了，老弟");
                    });//1s 显示
                })
                $("#yy").click(function(){
                    $("#aa").hide(2000);//隐藏
                })
                $("#zz").click(function(){
                    $("#aa").toggle(1000);//切换
                }) */
                
                //2.2 滑动动画
                /* $("#aa").hide();//默认隐藏
                $("#xx").on("click",function(){
                    $("#aa").slideDown(1000);//1s 显示
                })
                $("#yy").click(function(){
                    $("#aa").slideUp(2000);//隐藏
                })
                $("#zz").click(function(){
                    $("#aa").slideToggle(1000);//切换
                }) */
                
                //2.3 淡入淡出(透明度)
                /* $("#aa").hide();//默认隐藏
                $("#xx").on("click",function(){
                    $("#aa").fadeIn(1000);//1s 显示
                })
                $("#yy").click(function(){
                    $("#aa").fadeOut(2000);//隐藏
                })
                $("#zz").click(function(){
                    $("#aa").fadeToggle(1000);//切换
                }) */
                
                //2.4 自定义动画
                //--缩放
                 /* $("#bbb").click(function(){
                    $("#aa").animate({
                        width:100,
                        height:300
                    },1000);
                }) */
                //--移动[2]
                /* $("#bbb").click(function(){
                    $("#aa").animate({
                        left:"100px",
                        top:"100px"
                    },1000);
                }) */
                //在自身基础上面进行移动
                /* $("#bbb").click(function(){
                    $("#aa").animate({
                        left:"+=5",
                        top:"+=8"
                    },1000);
                }) */
                /* $("#bbb").click(function(){
                    $("#aa").addClass("xyz");
                }) */

样式：

<style type="text/css">
            #aa{
                width: 200px;
                height: 200px;
                background-color: orange;
                position: absolute;/* 绝对定位 */
                top:50px;
                left:50px;
            }
            p{
                text-align: center;/* 水平居中 */
                background-color: yellow;
            }
            .xyz{
                transform: rotate(360deg);
                transition: all 1s;
            }
        </style>

<body>
        <button id="bbb">变便便</button>
        <button id="xx">显示[展开](淡入)</button>
        <button id="yy">隐藏[收缩](淡出)</button>
        <button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button>
        <button id="btn">点我试试</button>
        <a  style="text-decoration: none;" href="#">显示</a>
        <div id="aa">
            <br />
            <br />
            <p>这是一巴掌</p>
        </div>
    </body>
      注意：

在写函数之前一定要引入外部js 以及另起一个script块