0
点赞
收藏
分享

微信扫一扫

jQuery04动图

程序员阿狸 2022-03-23 阅读 37
jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #aa{
                width:200px;
                height:200px;
                background-color:yellow;
                position:absolute;/*绝对定位*/
                top:50px;
                left:50px;            
                }
            p{
                text-align:center;/*水平居中*/
                background-color:pink;
            }
            .abc{
                transform:rotate(720deg);
                transition:all 2s;
            }
            </style>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            
            /* jQuery第四次课 */
            
            /* 一、事件 */
            //1.1 加载DOM两种方式(区别)
//             window.οnlοad=function(){
//                 console.info("js方式");
//             }
//             $(function(){
//                 console.info("jQuery方式")
//             })
//             底版本(1.几,2.几)的时候jQuery要比js快
//             目前的版本js要笔jQuery快
            // 整个js的加载方式只写一个,多个会覆盖
            // jQuery的加载方式可以写多个,都会执行
            
            
            $(function(){
                //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
                //--元素.on/bind()
//                 $("#aa").on("click",function(){
//                     alert("嘿嘿嘿");
//                 })
//              $("#aa").bind("mouseover",function(){
//                  alert("小张不要睡觉");
//              })

                //--元素.事件名
//                 $("#aa").click(function(){
//                     alert("干什么");
//                 })
//              $("#aa").mouseover(function(){
//                  alert(123);
//              })
                
                //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);//1s
             
                //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(44944);
//                  // 将按钮禁用
//                  $("#btn").prop("disabled",true);
//              })
                //--按钮点击偶数次可行 奇数次不行
//                 var i=1;
//                 $("#btn").click(function(){
//                     if(i%2==0){//偶数次
//                         console.info(44944,i);
//                     }
//                     i++;
//                 })
              
                /* 二、动画 */
                //2.1 基本动画 [回调函数]
//                 $("#aa").hide();//默认隐藏
//                 $("#xx").click(function(){
//                     $("#aa").show(1000,function(){
//                         //回调函数
//                         alert("来了,老弟");
//                     });//1s
//                 })
//                 $("#yy").click(function(){
//                     $("#aa").hide(2000);//2s
//                 })
//                 $("#zz").click(function(){
//                     $("#aa").toggle(1000);//1s
//                 })
//                 
                //2.2 滑动动画
//                 $("#aa").hide();//默认隐藏
//                 $("#xx").click(function(){
//                     $("#aa").slideDown(1000);//1s    
//                 })
//                 $("#yy").click(function(){
//                     $("#aa").slideUp(2000);//2s
//                 })
//                 $("#zz").click(function(){
//                     $("#aa").slideToggle(1000);//1s
//                 })
                
                //2.3 淡入淡出(透明度)
//                 $("#aa").hide();//默认隐藏 fade:褪色
//                 $("#xx").click(function(){
//                 $("#aa").fadeIn(1000);//1s    
//                 })
//                 $("#yy").click(function(){
//                 $("#aa").fadeOut(2000);//2s
//                 })
//                 $("#zz").click(function(){
//                 $("#aa").fadeToggle(1000);//1s
//                 })
                //2.4 自定义动画
                //--缩放
//                 $("#bb").on("click",function(){
//                     $("#aa").animate({
//                         windth:"100px",
//                         height:"300px"
//                     },1000);
//                 })
                //--移动[2]
//                 在自身基础上进行移动
//              $("#bb").click(function(){
//                 $("#aa").animate({
//                 left:"+=5",
//                 top:"+=10"
//                 },100)
//                 })
        $("#bb").click(function(){
            // 给div增加abc的样式
            $("#aa").addClass("abc");
        })
                
            })
            
            
        </script>
    </head>
    <body>
        <a style="text-decoration:none;" href="#">显示</a>
        <input type="button" value="点我试试" di="btn"/>
        <button id="xx">显示(展示)[淡入]</button>
        <button id="yy">隐藏(收缩)[谈出]</button>
        <button id="zz">显示/隐藏(展示/收缩)[淡入/谈出]</button>
        <button id="bb">变变变</button>
        <div id="aa"></div>
        <br />
        <br />
        <p>这是一个巴掌</p>
    </body>
</html>

总结

加载DOM两种方式(区别)

 底版本(1.几,2.几)的时候jQuery要比js快
目前的版本js要笔jQuery快

 整个js的加载方式只写一个,多个会覆盖
 jQuery的加载方式可以写多个,都会执行

举报

相关推荐

0 条评论