jQuery04-CFANZ编程社区

           p {
               text-align: center;/* 水平居中 */
               background-color: blue;
           }
           .xyz{
               transform: rotate(360deg);
               transition: all 1s;
           }
       </style>
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
       <script type="text/javascript">
           /* jQuery第四次课 */

           /* 一、事件 */
           //1.1 加载DOM两种方式(区别)
           // js只能执行一个其他的会被覆盖
           window.onload(function(){
               console.info("js方式");
           })
           // jQuery可以编写多个并且都会被执行
           // $(function(){
           //    console.info("jQuery方式");
           // })

           $(function() {
           //    //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
           //    // $("#aa").click(function(){
           //    //    alert("干哈");
           //    // })
           //    //--元素.on/bind()
           //    $("#aa").on("click", function() {
           //        alert("嘿嘿");
           //    })
           //    //--元素.事件名
           //    $("#aa").bind("click",function(){
           //        alert("哈哈哈哈哈哈哈哈哈");
           //    })

               //1.3 合成事件/事件切换
               //--hover()悬停控制元素[div]的显示和隐藏
               // $("#aa").hide();//隐藏
               // $("#aa").hover(function(){//鼠标移上
               //    $("#aa").show();//显示
               // },function(){//鼠标移出
               //    $("#aa").hide();//隐藏
               // })

               //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
               // $("#aa").hide(); //隐藏
               // $("#aa").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(){
               //    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(43999);
               //        // 将按钮禁用
               //    $("#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(123);
   //                }); //1s 显示
   //            })
   //            $("#yy").on("click", function() {
   //                $("#aa").hide(2000); //隐藏
   //            })
   //            $("#zz").on("click", function() {
   //                $("#aa").toggle(1000); //切换
   //            })

   //            //2.2 滑动动画

   //            $("#aa").hide(); //，默认隐藏
   //            $("#xx").on("click", function() {
   //                $("#aa").slideUp(1000, function(){//1s 显示
   //            })
   //            $("#yy").on("click", function() {
   //                $("#aa").slideDown(2000); //隐藏
   //            })
   //            $("#zz").on("click", function() {
   //                $("#aa").slideToggle(1000); //切换
   //            })

   //            //2.3 淡入淡出(透明度)
   //            $("#aa").hide(); //，默认隐藏
   //            $("#xx").on("click", function() {
   //                $("#aa").fadeIn(1000, function()) //1s 显示
   //            })
   //            $("#yy").on("click", function() {
   //                $("#aa").fadeOut(2000); //隐藏
   //            })
   //            $("#zz").on("click", function() {
   //                $("#aa").fadeToggle(1000); //切换
   //            })

               //2.4 自定义动画
               //--缩放
               // $("#bbb").click(function(){
               //    $("#aa").animate({
               //        width:100px,
               //        heigth:300px
               //    },1000);
               // })
               //--移动[2]
               // $("#bbb").click(function(){
               //    $("#aa").animate({
               //        left:100,
               //        top:300
               //    },1000);
               // })
               // 在自身基础上移动
               // $("#bbb").click(function(){
               //    $("#aa").animate({
               //        left:"+=5",
               //        top:"+=8"
               //    },1000);
               // })
               // 利用动画模拟心跳的感觉
               /* 利用模拟灰太狼退场 */
               /* 完成并掌握课题代码 */

               $("#bbb").click(function(){
                   $("#aa").addClass("xyz");
               })

           })
       </script>
   </head>
   <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>