jQuery_04

最新推荐文章于 2024-10-09 11:13:12 发布

T279liujie

最新推荐文章于 2024-10-09 11:13:12 发布

阅读量81

点赞数

分类专栏： jQuery 文章标签： jQuery 事件处理动画效果事件冒泡回调函数

本文链接：https://blog.csdn.net/T279liujie/article/details/123697726

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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: hotpink;
           }
       </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方式1");
           //            }
           //            $(function(){
           //                console.info("jQuery方式1")
           //            })$(function(){
           //                console.info("jQuery方式2")
           //            })$(function(){
           //                console.info("jQuery方式3")
           //            })

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

               //1.3 合成事件/事件切换
               //--hover()悬停控制元素[div]的显示和隐藏
               //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
               // $("#aa").hide();
               //                $("a").hover(function(){
               //                    $("#aa").show();
               //                },function(){
               //                    $("#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").on(onclick,function(e){
               //                    console.info(e.pageX,e.pageY);
               //                })
               //1.6 事件的移除
               //--按钮只能点击一次[2]
               //--按钮点击偶数次可行奇数次不行
               //                $("#btn").on("click",function(){
               //                    console.info(44944);
               //                    $("#btn").unbind("click")
               //                })

               //                $("#btn").one("click",function(){
               //                    console.info(44944);
               //                })
               //                        var i = 1;
               //                        $("#btn").on("click", function() {
               //                            if(i%2==0){
               //                                console.info(44944);
               //                            }
               //                                i++;
               //                            })

               /* 二、动画 */
               //2.1 基本动画 [回调函数]
               // $("#aa").hide();
               //                $("#xx").click(function() {
               //                    $("#aa").show(1000);
               //                    alert("来了老弟")
               //                })
               //                $("#yy").click(function() {
               //                    $("#aa").hide(1000);
               //                })
               //                $("#zz").click(function() {
               //                    $("#aa").toggle(1000);
               //                })

               //2.2 滑动动画
//                $("#xx").click(function() {
//                    $("#aa").slideDown(10000);
//                    // alert("来了老弟")
//                })
//                $("#yy").click(function() {
//                    $("#aa").slideUp(1000);
//                })
//                $("#zz").click(function() {
//                    $("#aa").slideToggle(1000);
//                })

               //2.3 淡入淡出(透明度)
//                $("#xx").click(function() {
//                    $("#aa").fadeIn(1000);
//                    // alert("来了老弟")
//                })
//                $("#yy").click(function() {
//                    $("#aa").fadeOut(1000);
//                })
//                $("#zz").click(function() {
//                    $("#aa").fadeToggle(1000);
//                })
//
               //2.4 自定义动画
               //--缩放
//                $("#bb").click(function(){
//                    $("#aa").animate({
//                        width: 100,
//                        heigt: 300
//                    },1000)
//                })
               //--移动[2]
               $("#bb").click(function(){
                   $("#aa").animate({
                       left: "+=10",
                       top: "+=30"
                   },100)
               })

           })
       </script>
   </head>
   <body>
       <input type="button" name="" id="btn" value="点我shishi" />
       <button id="xx">显示</button>
       <button id="yy">隐藏</button>
       <button id="zz">显示&隐藏</button>
       <button id="bb">变</button>
       <a href="#">显示</a>
       <div id="aa">
           <p>这是一巴掌</p>
       </div>
   </body>
</html>