jQuery(事件和动画)

最新推荐文章于 2022-09-24 10:29:59 发布

YangKen_liu

最新推荐文章于 2022-09-24 10:29:59 发布

阅读量50

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/YangKen_liu/article/details/123674615

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
       /* a标签属于行内元素，不能设置宽度和高度 */
           a{
               background-color: red;
               /* 转成行内块状或者块状 */
               display: inline-block;
               width:150px;
               height: 40px;
               /* 居中 */
               text-align: center;
               /* 行高 */
               line-height: 40px;
               /* 下划线 */
               text-decoration: none;
           }

           /* 伪类选择器 */
           a:hover{
               background-color: yellow;
               color: red;
           }
       </style>



       
       

       
       <script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
           // 1.原生态javascript加载函数和jQuery加载函数的使用及区别

           // (1).原生态js加载函数的编写 2种形式
           // a.window.onload = function(){} 1个多个的情况，前者无效
           // b.window.addEventListener('事件名称',function(){}); 多个
           // 在一个页面中出现多个window.onload，后者会覆盖前者
           // window.onload = function(){
           //    alert('第1个加载函数');
           // }
           // window.onload = function(){
           //    alert('第2个加载函数');
           // }
           // ------------------------------------------------------
           // window.addEventListener('load',function(){
           //    alert("111")
           // });
           // window.addEventListener('load',function(){
           //    alert("222")
           // });

           // jQuery的加载函数 2种一个页面可以出现多次
           // $(document).ready(function(){
           //    alert(111);
           // });
           // $(document).ready(function(){
           //    alert(22);
           // });
           // // 简写
           // $(function(){
           //    alert(123);
           // })

           // 2.js的加载函数和jQuery的加载函数出现在一个页面，先后顺序
           // 版本有关 jQuery3.0版本以上 js快
           // window.onload = function(){
           //    alert("原生态js")
           // }
           // $(function(){
           //    alert('jQuery')
           // });


       </script>

       

       <script type="text/javascript">
           // 加载函数
           $(function(){
               // 1.标签绑定绑定事件的方式
               // (1)直接调用click点击事件的方法即可
               // $("#btn1").click(function(){
               //    alert("我点击了这个按钮")
               // });
               // (2)可以通过标签对象调用on这个方法来绑定一个指定的事件。
               // $("#btn1").on('click',function(){
               //    alert("on实现的点击");
               // });
               // (3)可以通过调用bind方法进行绑定一个事件
               // $("#btn1").bind('click',function(){
               //    alert("bind 点击")
               // });
           })

       </script>

       <script type="text/javascript">
           //1.合成事件hover
           $(function(){
               // 参数中第1个回调函数的作用：鼠标触碰式触发
               // 参数中第2个回调函数的作用：鼠标离开式触发
               $("#btn2").hover(function(){
                   console.log('111')
                   // 标签显示show 属于jQuery中的动画效果
                   // $("#oDiv").show();
                   $("#oDiv").css("display","block");
               },function(){
                   console.log('222')
                   // 标签隐藏
                   // $("#oDiv").hide();
                   $("#oDiv").css("display","none");
               });


               // toggle事件
               $("#btn3").click(function(){
                   console.log("我点击了");
                   // 在jQuery中所有的动画效果都是默认改变标签的宽度，高度，透明度
                   $("#oDiv2").toggle(3000);
               })
           });


       </script>


       
       <script type="text/javascript">
       // 事件传播：在多个标签中设置点击事件，只允许当前点击的标签有效
       // 其它则无效----解决阻止事件传播

       // 阻止事件传播的顺序：从小到大。
           $(function(){
               // p标签设置一个点击事件
               $("p").click(function(){
                   alert('p段落的点击事件');
                   return false;//阻止事件传播
               })
               // 设置oDiv3的点击事件
               $("#oDiv3").click(function(){
                   alert('oDiv3的点击事件')
                   return false;
               })
               // $("body").click(function(){
               //    alert('body点击事件')
               // });


               // 事件坐标 pageX pageY 都是通过event事件对象调用

               $("body").click(function(){
                   // 获取鼠标所点击的位置
                   // 鼠标的坐标
                   // console.log(event.pageX+" "+event.pageY);
                   // // 偏移量考虑了外边距,边框,内填充
                   // console.log(event.offsetX+" "+event.offsetY);
                   // // 如果没有滚动条，与pageX和pageY是一样的
                   // // client 可视区宽度和高度
                   // console.log(event.clientX+" "+event.clientY)
               });
           });


       </script>

       
       <script type="text/javascript">
           $(function(){
               // unbind off

               $("#btn4").click(function(){
                   alert("恭喜你中奖了~");
                   // 调用解绑事件
                   // $(this).off();
                   // $(this).disable();//禁用无效
                   // disabled 是属性不是样式不能用css去设置
                   $(this).attr("disabled","disabled");
                   $(this).unbind();
               });

               var index = 1;
               $("#btn5").click(function(){
                   // 点击（奇数次可以，偶数次不行）
                   // index为奇数的时候可以为偶数的时候不行
                   if(index % 2 == 1){
                       console.log(index);
                   }
                   index++;
               });

               $("#btn6").one('click',function(){
                   alert("只有一次机会")
               })
           });
       </script>
   </head>
   <body>
       <button id="btn1" disabled="disabled">按钮</button>
       <hr>
       
       <a href="">我的老婆</a>

       <hr>
       <button type="button" id="btn2">按钮</button>
       <div id="oDiv" style="width:100px;height: 100px;background-color: red;display: none;"></div>

       <hr >
       <button type="button" id = "btn3">toggle</button>
       <div id="oDiv2" style="width:100px;height: 100px;background-color: red;display: none;"></div>

       <hr>
       <h4>事件传播如何阻止</h4>
       <div id = "oDiv3" style="width: 200px;height: 200px;background-color: red;">
           <br><br><br><br>
           <p style="width:100%;height: 20px;background-color: yellow;">我是p段落</p>

       </div>

       <hr>
       <h4>解绑事件</h4>
       <button id="btn4">点击抽象</button>
       <button id="btn5">点击（奇数次可以，偶数次不行）</button>
       <button id="btn6">one方法一次性</button></button>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>动画效果</title>
       <style type="text/css">

       </style>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           function test1(){
               // div隐藏和显示
               $("div").eq(0).show(5000)
           }
           function test2(){
               // div隐藏和显示
               $("div").eq(0).hide(5000)
           }
           function test3(){
               // div隐藏和显示
               $("div").eq(0).toggle(5000)
           }
           function test4(){
               $("div").eq(1).slideUp(4000);
           }
           function test5(){
               $("div").eq(1).slideDown(4000);
           }
           function test6(){
               $("div").eq(1).slideToggle(4000);
           }
           function test7(){
               $("div").eq(2).fadeIn(4000);
           }
           function test8(){
               $("div").eq(2).fadeOut(4000);
           }
           function test9(){
               $("div").eq(2).fadeToggle(4000);
           }

           function test10(){
               $("div").eq(3).animate({
                   width:"+=500px",
                   height:"+=500px",
                   opacity:"0.1"
               },10000)
           }




           $(function(){
               // 定时器
               window.setInterval(function(){
                   $("div").last().animate({
                       left:"+=5px"
                   },2);
               },500);
           })
       </script>
   </head>
   <body>
       <button οnclick="test1()">基本动画show</button>

       <button οnclick="test2()">基本动画hide</button>
       <button οnclick="test3()">基本合成动画toggle</button>
       <div style="width: 100px;height: 100px;background-color: red;"></div>
       <hr>
       <button οnclick="test4()">slideUp</button>
       <button οnclick="test5()">slideDown</button>
       <button οnclick="test6()">slideToggle</button>
       <div style="width: 100px;height: 100px;background-color: yellow;"></div>
       <hr>
       <button οnclick="test7()">fadeIn</button>
       <button οnclick="test8()">fadeOut</button>
       <button οnclick="test9()">fadeToggle</button>
       <div style="width: 100px;height: 100px;background-color: blue;"></div>
       <hr>
       <button οnclick="test10()">aniamte</button>
       <div style="width: 100px;height: 100px;background-color: black;"></div>


       <div style="width: 100px;height: 100px;background-color: orange;position: absolute;left: 0;top: 600px;"></div>

       <br><br><br><br><br><br><br><br><br>
   </body>
</html>

YangKen_liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery(事件和动画)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* a标签属于行内元素，不能设置宽度和高度 */ a{ background-color: red; ...
复制链接

扫一扫