jQuery04

最新推荐文章于 2022-04-22 20:08:36 发布

weixin_65128149

最新推荐文章于 2022-04-22 20:08:36 发布

阅读量39

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_65128149/article/details/123689695

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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: deeppink;
           }
       </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方式");
           //
           //            })
           $(function() {
               //1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
               //--元素.on/bind()
               //--元素.事件名
               //                $("#aa").on("click",function(){
               //                    alert("哈哈哈哈");
               //                })
               // $("#aa").bind("mousemove",function(){
               //                    alert("张nb别睡觉");
               //                })
               // $("#aa").mousemove(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);
//    $("#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("来了拉低")
//    });
// })
//
// $("#yy").click(function(){
//    $("#aa").hide(2000);
// })
//
// $("#zz").click(function(){
//    $("#aa").toggle(1000);
// })
// var i=1;
// $("#zz").click(function(){
//    $("#aa").show(1000);
//    if(i%2==0){
// $("#aa").hide();
//    }
//    i++;
// })
               //2.2 滑动动画
// $("#aa").hide();
// $("#xx").click(function(){
//    $("#aa").slideDown(1000);
//
// })
// //
// $("#yy").click(function(){
//    $("#aa").slideUp(2000);
// })
//
// $("#zz").click(function(){
//    $("#aa").slideToggle(1000);
// })
// //                //2.3 淡入淡出(透明度)
// $("#aa").hide();
// $("#xx").click(function(){
//    $("#aa").fadeIn(1000);
//
// })
// //
// $("#yy").click(function(){
//    $("#aa").fadeOut(2000);
// })
//
// $("#zz").click(function(){
//    $("#aa").fadeToggle(1000);
// })

/* 1.基本动画 2.划入动画 3.谈入谈出动画 */

               //2.4 自定义动画
               //--缩放

//                $("#bb").on("click",function(){
//                    $("#aa").animate({
//                        width:100,
//                        height:300
//                    },1000);
//                })
               //--移动[2]
// $("#bb").on("click",function(){
//                    $("#aa").animate({
//                        left:100,
//                        top:100
//                    },2000);
//                })
//在自身基础上进行移动
// $("#bb").on("click",function(){
//                    $("#aa").animate({
//                        left:"+=5",
//                        top:"+=10"
//                    },100);
//                })

           })
       </script>
   </head>
   <body>
       <a style="text-decoration: none;" href="#">显示</a>
       <input type="button" value="点我试试" id="btn" />
       <button id="xx">显示(展开)</button>
       <button id="yy">隐藏(收缩)</button>
       <button id="zz">显示/隐藏(张开/收缩)</button>
       <button id="bb">变变变</button>
       <div id="aa">
           <br />
           <br />
<p>这是一巴掌</p>
       </div>
   </body>
</html>

weixin_65128149

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery04

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #aa { width: 200px; height: 200px; ...
复制链接

扫一扫

专栏目录