jQuery事件 jQuery动画

無话可说.

已于 2022-04-05 20:25:34 修改

阅读量165

点赞数 2

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

于 2022-03-20 20:34:59 首次发布

本文链接：https://blog.csdn.net/weixin_65565181/article/details/123620298

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（一）事件

1.加载Dom两种方式
1.1 window.onload方式（执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行；编写个数：1个）

1.2 jQuery方式（执行时间：网页结构绘制完成后，执行；编写个数：多个）

注意：

①jQuery3.0：window.onload比jQuery先执行

②jQuery1.0和2.0：jQuery比window.onload先执行

案例1：测试两种方式的区别【个数+顺序】

     /* window.onload=function(){
    console.info("js方式1");
   }
   window.onload=function(){
    console.info("js方式2");
   }
   window.onload=function(){     //window.onload只会显示最后一个
    console.info("js方式3");
   } */
   // jQuery  可以写多个  都会被执行
   /* $(function(){
    console.info("jQuery方式1");
   })
   $(function(){
    console.info("jQuery方式2");
   })
   $(function(){
    console.info("jQuery方式3");
   }) */

2.绑定事件两种方式
2.1 元素.on("事件名",function(){})

2.2 元素.事件名(function(){})

案例2：演示事件(鼠标悬停和点击)的两种方式

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

3.合成事件/事件切换
3.1 hover()：鼠标悬停合成事件

3.1.1 鼠标移上去第一个函数

3.1.2 鼠标移除第二个函数

案例3：升级案例2鼠标悬停显示和隐藏

//1.3 合成事件/事件切换
//--hover()悬停控制元素[div]的显示和隐藏
/* $("#aa").hide();//隐藏
$("a").hover(function(){//鼠标移上
$("#aa").show();//显示
},function(){//鼠标移出
$("#aa").hide();//隐藏

}) */
3.2 toggle()：鼠标点击合成事件

案例4：升级案例2鼠标点击显示和隐藏

  //--toggle()点击控制元素[div]的显示和隐藏[注意版本问题]
       /* $("#aa").hide();//隐藏
    $("a").toggle(function(){
     $("#aa").show();//显示
    },function(){
     $("#aa").hide();//隐藏
    }) */

// $("#aa").toggle(1000);
4.事件传播（事件冒泡）
4.1阻止传播：事件后面加上 return false

案例5：给body div span(在div中) 分别添加点击事件，测试事件传播

         //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被打了");
    }) */

5.事件坐标
5.1 offsetX：当前元素左上角

5.2 clientX：窗口左上角

5.3 pageX：网页左上角

案例6：pageX实现鼠标悬浮，获取鼠标坐标

        //1.5 事件event的坐标[了解即可 pageX,pageY]
    /* $("#aa").click(function(e){
     console.info(e.pageX,e.pageY);//x,y坐标
    }) */

6.移除事件：
6.1 元素.unbind("事件名")
案例7：按钮点击一次，不能再次点击
注意1：一般情况下，不会使用unbind，推荐使用变量控制事件

   /* $("#btn").on("click",function(){
     //做一系列事情
     console.info(44944);
     //将点击事件进行移除
     $("#btn").off("click");
     //将按钮禁用
     $("#btn").attr("disabled",true);
    }) */
    //一次
    /* $("#btn").one("click",function(){
     console.info(44944);
     //将按钮禁用
     $("#btn").attr("disabled",true);
    }) */

案例8：点击按钮偶数次可以，奇数次则失效
注意2：如果某个元素只允许使用一次事件，则可以使用one()

//--按钮点击偶数次可行奇数次不行

    /*  var i=1;
     $("#btn").click(function(){
      if(i%2==0){
       console.info(44944,i);//做一系列事情
      }
      i++;
     }) */

（二）动画效果
素材：

<body>
  <button id="bbb">变便便</button>
  <button id="xx">显示[展开](淡入)</button>
  <button id="yy">隐藏[收缩](淡出)</button>
  <button id="zz">显示/隐藏[展开/收缩](淡入/淡出)</button>
  <button id="btn">点我试试</button>
  <a style="text-decoration: none;" href=" ">显示</ a>
  <div id="aa">
   <br />
   <br />
   <p>这是一巴掌</p >
  </div>
 </body>
</html>

基本
显示：show(Time)
隐藏:hide(Time)
切换：toggle（Time）
案例1：点击按钮，控制div显示和隐藏（基本动画）

//2.1 基本动画 [回调函数]
    /* $("#aa").hide();//默认隐藏
    $("#xx").on("click",function(){
     $("#aa").show(1000,function(){
      alert("来了，老弟");
     });// 1s 显示
     
    })
 
                $("#yy").click(function(){
     $("#aa").hide(2000);//隐藏
    })
    $("#zz").click(function(){
     $("#aa").toggle(1000);//切换
    }) */

滑动
slideUp(Time)：动画收缩(向上滑动)-->隐藏
slideDown(Time)：动画展开(向下滑动)-->显示
slideToggle(Time)：动画切换
案例2：点击按钮，控制div显示和隐藏（滑动）
//2.2 滑动动画

    /* $("#aa").hide();//默认隐藏
    $("#xx").on("click",function(){
     $("#aa").slideDown(1000);// 1s 显示
    })
    $("#yy").click(function(){
     $("#aa").slideUp(2000);//隐藏
    })
    $("#zz").click(function(){
     $("#aa").slideToggle(1000);//切换
    }) */

淡入淡出(透明度)
fadeIn(Time)：淡入(透明度减少)
fadeOut(Time)：淡出(透明度增大)
fadeToggle(Time)：切换
案例3：点击按钮，控制div显示和隐藏（透明度）

//2.3 淡入淡出(透明度)
    /* $("#aa").hide();//默认隐藏
    $("#xx").on("click",function(){
     $("#aa").fadeIn(1000);// 1s 显示
    })
    $("#yy").click(function(){
     $("#aa").fadeOut(2000);//隐藏
    })
    $("#zz").click(function(){
     $("#aa").fadeToggle(1000);//切换
    }) */

自定义动画
元素.animate({属性：属性值},Time)
缩放
width
height
案例4：点击按钮，控制div的宽度和高度变大

/* //--缩放
    $("#bbb").click(function(){
     $("#aa").animate({
      width:"100px",
      height:"300px"
     },1000);
    }) */

移动
top
left
案例5：点击按钮，控制div移动，距离网页左上角

//--移动[2]
    $("#bbb").click(function(){
     $("#aa").animate({
      left:"+=5",
      top:"+=8"
     },100);
    })

移动(本元素)，距离
top= "+="
left= "-="
案例6：点击按钮，控制div移动，距离本元素

      $("#bbb").click(function() {
     $("#aa").addClass("xyz");
    })     //xyz是在style里写的样式

思维导图

好啦，今日的jQuery学习分享就到这里了，后期还会有jQuery学习笔记分享，可以关注一起学习哦！加油！

無话可说.

关注

2
点赞
踩
0

收藏

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

（一）事件1.加载Dom两种方式1.1 window.onload方式（执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行；编写个数：1个）1.2 jQuery方式（执行时间：网页结构绘制完成后，执行；编写个数：多个）注意：①jQuery3.0：window.onload比jQuery先执行②jQuery1.0和2.0：jQuery比window.onload先执行案例1：测试两种方式的区别【个数+顺序】 /* window.onload=...
复制链接

扫一扫

专栏目录