AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery04(事件&动画)

2023-10-09 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： jQuery04(事件&动画)

一.事件

1.加载Dom两种方式

1.1  window.onload方式

    执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行

    编写个数：1个

1.2  jQuery方式

     执行时间：网页结构绘制完成后，执行

     编写个数：多个

两个都有的情况下执行顺序【面试题】

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

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

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

//1.1 加载DOM两种方式(区别)  
    /*
     1.高版本中(3.X)  js比jQuery先执行  低版本(1.X或2.X)  jQuery比js先执行
     2.js的加载函数只能写1个  多个会覆盖
       jQuery的加载函数可以写多个  都会被执行
    */
    // js方式
    window.onload=function(){
      console.info("js方式1");
    }
    window.onload=function(){
      console.info("js方式2");
    }
    window.onload=function(){
      console.info("js方式3");
    }
    // jQuery方式
    // ①
    $(document).ready(function(){
      console.info("jQuery方式");
    })
    // ②
    $(function(){
      console.info("jQuery方式1");
    })
    $(function(){
      console.info("jQuery方式2");
    })
    $(function(){
      console.info("jQuery方式3");
    })

2.绑定事件两种方式

  1. 元素.on("事件名",function(){})
  2. 元素.事件名(function(){})

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

<script>
$(function{
      // 1.2 绑定事件的两种方式 [eg.:点击、悬停事件等等]
      // --元素.on/bind()
      // 点击事件
      $("#aa").on("click",function(){
        alert("hh");
      })
      // 悬停事件
      $("#aa").bind("mouseover",function(){
        $(this).css("background","pink");
      })
      // --元素.事件名  简便
      $("#aa").click(function(){
        alert("来来来");
      })
})
<script/>
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>

3.合成事件/事件切换

  1. hover()：鼠标悬停合成事件

       1.1鼠标移上去第一个函数

       1.2鼠标移除第二个函数

2.toggle()：鼠标点击合成事件

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

$(function{
        //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").hide(1000);
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
  #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
<style/>

4.事件传播（事件冒泡）

  1. 传播：小-->中-->大
  2. 阻止传播：事件后面加上  return false

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

$(function{
//1.4 事件的传播(事件冒泡) 小p->中div->大body
      //依次加点击事件
      $("p").on("click",function(){
        console.info("p被点击了");
      })
      $("div").on("click",function(){
        console.info("div被点击了");
        return false;//阻断冒泡
      })
      $("body").on("click",function(){
        console.info("body被点击了");
      })
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
  </style>

5.事件坐标

  1. offsetX：当前元素左上角
  2. clientX：窗口左上角
  3. pageX：网页左上角

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

$(function{
    // 1.5 事件event的坐标[了解即可 pageX,pageY]
      $("#aa").click(function(e){
        console.info(e.pageX,e.pageY);
      })
})
<body>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
#aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }

6.移除事件

  1. 元素.unbind("事件名")
  2. 注意1：一般情况下，不会使用unbind，推荐使用变量控制事件
  3. 注意2：如果某个元素只允许使用一次事件，则可以使用one()

案例7：按钮点击一次，不能再次点击

$(function{
          //1.6 事件的移除
      //--按钮只能点击一次[2]
      //一次性
      $("#btn").one("click",function(){
        console.info(34342);
      })
})
<body>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
  </style>

案例8：点击按钮偶数次可以，奇数次则失效

$(function(){
    //--按钮点击偶数次可行 奇数次不行
      let i=1;
      $("#btn").click(function(){
        if(i%2==0){//只有点击偶数次的时候才会相应操作
          console.info(44944,i);
        }
        i++;
      })
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>

二:动画效果

1.基本

  1. 显示：show(Time)
  2. 隐藏:hide(Time)
  3. 切换：toggle（Time）

案例1：点击按钮，控制div显示和隐藏（基本动画）

$(function({
      /* 二、动画 */
      //2.1 基本动画 [回调函数]
      $("#aa").hide( );
      //显示
      $("#ii").click(function(){
        $("#aa").show(1000,function(){//显示  毫秒
          //回调函数
          $(this).css("background","yellow");
        });
      })
      //隐藏
      $("#jj").click(function(){
        $("#aa").hide(2000);
      })
      //显示/隐藏
      $("#zz").click(function(){
        $("#aa").toggle(2000);
      })
}))
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
  </style>

2.滑动

  1. slideUp(Time)：动画收缩(向上滑动)-->隐藏
  2. slideDown(Time)：动画展开(向下滑动)-->显示
  3. slideToggle(Time)：动画切换

案例2：点击按钮，控制div显示和隐藏（滑动）

$(function(){
    //2.2 滑动动画
      $("#aa").hide();
      // 展开
      $("#ii").click(function () {
        $("#aa").slideDown(2000);
      })
      // 隐藏
      $("#jj").click(function () {
        $("#aa").slideUp(2000);
      })
      //  展开/隐藏
      $("#zz").click(function () {
        $("#aa").slideToggle(2000);
      })
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
  </style>

3.淡入淡出(透明度)

  1. fadeIn(Time)：淡入(透明度减少)
  2. fadeOut(Time)：淡出(透明度增大)
  3. fadeToggle(Time)：切换

案例3：点击按钮，控制div显示和隐藏（透明度）

$(function{
//2.3 淡入淡出(透明度)
      $("#aa").hide();
      // 淡入
      $("#ii").click(function () {
        $("#aa").fadeIn(2000);
      })
      // 淡出
      $("#jj").click(function () {
        $("#aa").fadeOut(2000);
      })
      //  淡入/淡出
      $("#zz").click(function () {
        $("#aa").fadeToggle(2000);
      })
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
  </style>

4.自定义动画

  1. 元素.animate({属性：属性值},Time)
  2. 缩放  width  height
  3. 移动  top  left
  4. 移动(本元素)，距离  top=  "+="    left= "-="

案例4：点击按钮，控制div的宽度和高度变大

$(function{
        //2.4 自定义动画
      // --缩放
      $("#bbb").on("click",function(){
        $("#aa").animate({
          width:100,
          height:400
        },1000)
      })
      // --移动[2]
      $("#bbb").click(function(){
        $("#aa").animate({
          top:100,
          left:100
        },500)
      })
      // 在自身的基础上累加
      $("#bbb").click(function(){
        $("#aa").animate({
          // += 拼接
          top:"+=5",
          left:"+=10"
        },500)
      })
        //旋转动画
      $("#bbb").click(function(){
        $("#aa").addClass("xyz");
      })
})
<body>
  <button id="bbb">噜啦噜啦嘞</button>
  <button id="ii">显示(展开)[淡入]</button>
  <button id="jj">隐藏(收起)[淡出]</button>
  <button id="zz">显示/隐藏(展开/收起)[淡入/淡出]</button>
  <input type="button" value="很好喝" id="btn" />
  <!--  style="text-decoration: none:去除下划线 -->
  <a href="#" style="text-decoration: none;">显示</a>
  <div id="aa">
    <br />
    <p>好红红火火恍恍惚惚</p>
  </div>
</body>
<style>
    #aa {
      width: 200px;
      height: 200px;
      background-color: darksalmon;
      /* 绝对定位 */
      position: absolute;
      top: 50px;
      left: 50px;
    }
    p {
      background-color: antiquewhite;
      text-align: center;/* 文字居中 */
    }
    .xyz{
      /* s旋转多少度deg*/
      transform: rotate(360deg);
      /* 全部实现完2s */
      transform: all  2s;
    }
  </style>


文章标签：
JavaScript
关键词：
jQuery事件
jQuery动画
jQuery事件动画
瑶大头*^_^*
目录
相关文章
光明顶阳顶天
|
2月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
光明顶阳顶天
111 55
听白
|
6月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
听白
37 1
hnrk7epeorhrk
|
6月前
|
移动开发 JavaScript 前端开发
老程序员分享：jQuery笔记（四）jQuery中的动画
老程序员分享：jQuery笔记（四）jQuery中的动画
hnrk7epeorhrk
50 0
Star时光
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery：高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery：高效DOM操作与事件处理
Star时光
18 0
听白
|
3月前
|
JavaScript
jQuery 事件
jQuery 事件
听白
40 10
杀死一只知更鸟debug
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法，选择器，事件及hide（），show()， toggle()
本文是关于jQuery的学习笔记，涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
杀死一只知更鸟debug
34 0
jQuery学习记录--jQuery语法，选择器，事件及hide（），show()， toggle()
听白
|
3月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
听白
21 4
听白
|
3月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
听白
30 4
听白
|
3月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
听白
34 3
听白
|
3月前
|
JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
听白
43 11