jQuery绑定事件的两种方式、合成事件/切换、事件的传播、事件event的坐标、事件的移除、基本动画、滑动动画、淡入淡出、自定义动画、爱心点击事件

最新推荐文章于 2022-08-19 10:56:57 发布

习惯过了头121

最新推荐文章于 2022-08-19 10:56:57 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/m0_68332494/article/details/123688427

版权

JAVA 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!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两种方式(区别)
           //可以写多个都会被执行
           /* $(function(){
               console.info("jquery方式1");
           })
           $(function(){
               console.info("jquery方式2");
           })
           $(function(){
               console.info("jquery方式3");
           }) */
           //只能写一个
           /* window.οnlοad=function(){
               console.info("js方式1");
           }
           window.οnlοad=function(){
               console.info("js方式2");
           }
           window.οnlοad=function(){
               console.info("js方式3");
           } */

           $(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();//默认隐藏 fad褪色
               $("#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({
                       width:100,
                       height:300
                   },1000);
               }) */
               //--移动[2]
               /* $("#bb").click(function(){
                   $("#aa").animate({
                       left:100,
                       top:100
                   },2000) */
               })
               //在自身基础上进行移动
           /*    $("#bb").click(function(){
                   $("#aa").animate({
                       left:"+=5",
                       top:"+=10"
                   },2000)
               }) */

           })


       </script>
   </head>
   <body>
       <input type="button" value="点我试试" id="btn"/>
       <a style="text-decoration:none;" href="#">显示</a>
       <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>