jQuery事件

最新推荐文章于 2024-07-25 11:52:08 发布

夷陵说书人

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量182

点赞数

文章标签： html java 前端框架 javascript

本文链接：https://blog.csdn.net/T283gonglei/article/details/126669118

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           .big{
               width: 200px;
               height: 200px;
               background-color: aqua;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.7.2.js">
       </script>
       <script type="text/javascript">
//            window.οnlοad=function(){
//                console.info("window.onload1");
//            }
//            window.οnlοad=function(){
//                console.info("window.onload2");
//            }
//            window.οnlοad=function(){
//                console.info("window.onload3");
//            }
//            window.οnlοad=function(){
//                console.info("window.onload4");
//            }

//            $(function(){
//                console.info("jQuery1");
//            })
//            $(function(){
//                console.info("jQuery2");
//            })
//            $(function(){
//                console.info("jQuery3");
//            })
//            $(function(){
//                console.info("jQuery4");
//            })

           $(document).ready(function(){
               // console.info("全拼写法");
               // 鼠标点击
//                $(".big").on("click",function(){
//                    console.info("点击了");
//                })

               //鼠标点击
//                $(".big").click(function(){
//                    console.info("又点击了");
//                })

               //鼠标进来事件方式1
               /* $(".big").on("mouseenter",function(){
                   console.info("鼠标进来了");
               })
               //鼠标出去事件方式1
               $(".big").on("mouseleave",function(){
                   console.info("鼠标出去了");
               }) */
               //鼠标进来事件方式2
               /* $(".big").mouseenter(function(){
                   console.info("鼠标进来了");
               })
               //鼠标出去事件方式2
               $(".big").mouseleave(function(){
                   console.info("鼠标出去了")
               }) */

               //hover:显示和隐藏(鼠标悬浮 )
               // $(".big").hide();//隐藏
               /*
               $("h2").hover(function(){
                   $(".big").show();
               },function(){
                   $(".big").hide();
               }) */

               //toggle,鼠标点击显示和隐藏
               /* $("h2").toggle(function(){
                   $(".big").show();
               },function(){
                   $(".big").hide();
               }) */

               /* $("p").css("background","blue");
               //事件传播
               //给p标签添加点击事件
               $("p").click(function(){
                   console.info("p被点了");
                   return false;
               })
               //给div添加点击事件
               $(".big").click(function(){
                   console.info("div被点了");
               })
               //给body添加点击事件
               $("body").click(function(){
                   console.info("body被点了");
               }) */

               /* $(".big").mousemove(function(event){
                   //event:事件
                   var x = event.pageX;
                   var y = event.pageY;
                   $("#xy").text(x+","+y);
               }) */
               /* var i=0;
               $("#myBtn").click(function(){
                   i++;
                   if(i%2==0){
                       console.info("试试就试试"+i);
                   }else{
                       //上面代码执行后就移除按钮的点击事件
                       // $("#myBtn").unbind("click");
                   }
               }) */

               /* $("#myBtn").one("click",function(){
                   console.info("点了");
               }) */
               /* 基本动画 */
               /* $("#show").click(function(){
                   $(".big").show(1000);
               })
               $("#hide").click(function(){
                   $(".big").hide(1000);
               })

               $("#showAndHide").click(function(){
                   $(".big").toggle(1000);
               }) */

               /* 滑动 */
               /* $("#slideDown").click(function(){
                   $(".big").slideDown(1000);
               })
               $("#slideUp").click(function(){
                   $(".big").slideUp(1000);
               })

               $("#slideToggle").click(function(){
                   $(".big").slideToggle(1000);
               }) */

               /* 淡入淡出 */
               /* $("#fadeIn").click(function(){
                   $(".big").fadeIn(1000);
               })
               $("#fadeOut").click(function(){
                   $(".big").fadeOut(1000);
               })

               $("#fadeToggle").click(function(){
                   $(".big").fadeToggle(1000);
               }) */

               /* 自定义动画 */
               //变大
               $("#bigBtn").click(function(){
                   $(".big").animate({
                       width:300,
                       height:300
                   },1000)
               })
               //变小
               $("#smallBtn").click(function(){
                   $(".big").animate({
                       width:200,
                       height:200
                   },1000)
               })

               //移动
               $("#runBtn").click(function(){
                   $(".big").animate({
                       left:10,
                       top:10
                   },1000)
               })

               $("#topBtn").click(function(){
                   $(".big").animate({
                       left:"-=50",
                       top:"+=50"
                   },1000)
               })

           })

       </script>
   </head>
   <body>
       <h2>好消息</h2>
       <input type="button" name="" id="topBtn" value="+=" />
       <br>
       <input type="button" name="" id="runBtn" value="走你" />
       <br>
       <input type="button" name="" id="bigBtn" value="变大" />
       <input type="button" name="" id="smallBtn" value="变小" />
       <br>
       <input type="button" name="" id="myBtn" value="点下试试" />
       <input type="button" name="" id="show" value="显示" />
       <input type="button" name="" id="hide" value="隐藏" />
       <input type="button" name="" id="showAndHide" value="显示/隐藏" />
       <br>
       <input type="button" name="" id="slideDown" value="展开" />
       <input type="button" name="" id="slideUp" value="收缩" />
       <input type="button" name="" id="slideToggle" value="展开/收缩" />
       <br>
       <input type="button" name="" id="fadeIn" value="淡入" />
       <input type="button" name="" id="fadeOut" value="淡出" />
       <input type="button" name="" id="fadeToggle" value="淡入/淡出" />
       <div class="big" style="position: absolute; left: 100px; top: 100px;">
           <br>
           <p>今天是个好日子</p>
       </div>
       <span id="xy"></span>

   </body>
</html>