jQuery初识 - jQuery案例练习

最新推荐文章于 2022-08-04 09:55:06 发布

码小余の博客

最新推荐文章于 2022-08-04 09:55:06 发布

阅读量1.7k

点赞数 3

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

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/106817911

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery事件委托

什么是事件委托

请别人帮忙做事情，然后将做完的结果反馈给我们

在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。

jQuery移入移出事件

mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件

mouseenter/mouserleave事件，子元素被移入移出不会触发父元素的事件（推荐使用）

电影排行榜案例

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 07:21:47
 * @LastEditTime: 2020-06-17 08:59:25
 * @FilePath: \代码\35-电影排行榜下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>35-电影排行榜下</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 300px;
        height: 450px;
        margin: 50px auto;
        border: 1px solid #000;
      }
      .box > h1 {
        font-size: 20px;
        line-height: 35px;
        color: deeppink;
        padding-left: 10px;
        border-bottom: 1px dashed #ccc;
      }
      ul > li {
        list-style: none;
        padding: 5px 10px;
        border: 1px dashed #ccc;
      }
      ul > li:nth-child(-n + 3) span {
        background: deeppink;
      }
      ul > li > span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        margin-right: 10px;
      }
      .content {
        overflow: hidden;
        margin-top: 5px;
        display: none;
      }
      .content > img {
        width: 80px;
        height: 120px;
        float: left;
      }
      .content > p {
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
        line-height: 20px;
      }
      .current .content {
        display: block;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        /*
        // 1. 监听鼠标移入事件
        $("li").mouseenter(function () {
          $(this).addClass("current");
        });

        // 2. 监听鼠标移出事件
        $("li").mouseleave(function () {
          $(this).removeClass("current");
        });
        */

        $("li").hover(
          function () {
            $(this).addClass("current");
          },
          function () {
            $(this).removeClass("current");
          }
        );
      });
    </script>
  </head>
  <body>
    <div class="box">
      <h1>电影排行榜</h1>
      <ul>
        <li>
          <span>1</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
        <li>
          <span>2</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
        <li>
          <span>3</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
        <li>
          <span>4</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
        <li>
          <span>5</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
        <li>
          <span>6</span>电影名称
          <div class="content">
            <img src="images/ysqwl.jpg" alt="" />
            <p>
              天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。
              调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。
              避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......
            </p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

TAB选项卡案例

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 09:01:22
 * @LastEditTime: 2020-06-17 10:49:18
 * @FilePath: \代码\38-TAB选项卡终极.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>38-TAB选项卡终极</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 440px;
        height: 298px;
        border: 1px solid #000;
        margin: 50px auto;
      }
      .nav {
        height: 50px;
      }
      .nav > li {
        list-style: none;
        width: 110px;
        height: 50px;
        background: orange;
        text-align: center;
        line-height: 50px;
        float: left;
      }
      .nav > .current {
        background: #ccc;
      }
      .content li {
        list-style: none;
        width: 440px;
        height: 250px;
        display: none;
      }
      /* .content li div {
        width: 440px;
        height: 250px;
        display: none;
      } */
      .content .show {
        display: block;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        // 1. 监听选项卡的移入事件
        $(".nav>li").mouseenter(function () {
          // 1.1 修改被移入选项卡的背景颜色
          $(this).addClass("current");
          // 1.2 还原其他兄弟选项卡的背景颜色
          $(this).siblings().removeClass("current");
          // 1.3 获取当前移入选项卡的索引
          var $index = $(this).index();
          // 1.4 根据索引找到对应的图片
          var $li = $(".content li").eq($index);
          // 1.5 隐藏非当前的其他图片
          $li.siblings().removeClass("show");
          // 1.6 显示找到的图片
          $li.addClass("show");
        });
      });
    </script>
  </head>
  <body>
    <div class="box">
      <ul class="nav">
        <li class="current">H5+C3</li>
        <li>jQuery</li>
        <li>C语言</li>
        <li>Go语言</li>
      </ul>
      <ul class="content">
        <li class="show" style="background: red;"></li>
        <li style="background: blue;"></li>
        <li style="background: yellow;"></li>
        <li style="background: green;"></li>
      </ul>
    </div>
  </body>
</html>

jQuery显示和隐藏动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>39-jQuery显示和隐藏动画</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            // $("div").css("display", "block");
            $("div").show(1000, function () {
              alert("显示动画执行完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            // $("div").css("display", "none");
            $("div").hide(1000, function () {
              alert("隐藏动画执行完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").toggle(1000, function () {
              alert("切换完毕");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
  </body>
</html>

jQuery展开和收起动画

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 11:23:57
 * @LastEditTime: 2020-06-17 11:46:00
 * @FilePath: \代码\41-jQuery 展开和收起动画.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>41-jQuery 展开和收起动画</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 300px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            $("div").slideDown(1000, function () {
              alert("展开完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            $("div").slideUp(1000, function () {
              alert("收起完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").slideToggle(1000, function () {
              alert("切换完毕");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>展开</button>
    <button>收起</button>
    <button>切换</button>
    <div></div>
  </body>
</html>

折叠菜单

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 12:21:17
 * @LastEditTime: 2020-06-17 13:19:56
 * @FilePath: \代码\43-折叠菜单下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>43-折叠菜单下</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        list-style: none;
        width: 300px;
        margin: 100px auto;
      }
      .nav > li {
        border: 1px solid #000;
        line-height: 35px;
        border-bottom: none;
        text-indent: 2rem;
        position: relative;
      }
      .nav > li:last-child {
        border-bottom: 1px solid #000;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .nav > li:first-child {
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
      }
      .nav > li > span {
        display: inline-block;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        position: absolute;
        right: 20px;
        top: 5px;
      }
      .nav > li > span span {
        position: absolute;
        top: 0;
        left: -20px;
      }
      .sub {
        display: none;
      }
      .sub > li {
        list-style: none;
        background: mediumpurple;
        border-bottom: 1px solid #fff;
      }
      .sub > li:hover {
        background: red;
      }
      .nav .current > span {
        transform: rotate(90deg);
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        // 1. 监听一级菜单的点击事件、
        $(".nav>li").click(function () {
          // 1.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 1.2 让二级菜单展开
          $sub.slideDown(1000);
          $(this).addClass("current");
          // 1.3 拿到所有非当前的二级菜单
          var otherSub = $(this).siblings().children(".sub");
          // 1.4 让所有非当前的二级菜单收起
          otherSub.slideUp(1000);
          $(this).siblings().removeClass("current");
        });
      });
    </script>
  </head>
  <body>
    <ul class="nav">
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>
        一级菜单<span><span>></span></span>
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

下拉菜单

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 13:20:40
 * @LastEditTime: 2020-06-17 13:37:57
 * @FilePath: \代码\44-下拉菜单.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>44-下拉菜单</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .nav {
        list-style: none;
        width: 300px;
        height: 50px;
        background: red;
        margin: 100px auto;
      }
      .nav > li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        float: left;
      }
      .sub {
        list-style: none;
        background: mediumpurple;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        /*
            在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画
          */
        // 1. 监听一级菜单的移入事件
        $(".nav>li").mouseenter(function () {
          // 1.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 停止当前正在运行的动画
          $sub.stop();
          // 1.2 让二级菜单展开
          $sub.slideDown(1000);
        });
        // 2. 监听一级菜单的移出事件
        $(".nav>li").mouseleave(function () {
          // 2.1 拿到二级菜单
          var $sub = $(this).children(".sub");
          // 停止当前正在运行的动画
          $sub.stop();
          // 2.2 让二级菜单收起
          $sub.slideUp(1000);
        });
      });
    </script>
  </head>
  <body>
    <ul class="nav">
      <li>
        一级菜单
        <ul class="sub">
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
          <li>二级菜单</li>
        </ul>
      </li>
      <li>一级菜单</li>
      <li>一级菜单</li>
    </ul>
  </body>
</html>

jQuery淡入淡出动画

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 13:39:23
 * @LastEditTime: 2020-06-17 13:47:19
 * @FilePath: \代码\45-jQuery淡入淡出动画.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>45-jQuery淡入淡出动画</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;
        background: red;
        display: none;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            $("div").fadeIn(1000, function () {
              alert("淡入完毕");
            });
          });
        $("button")
          .eq(1)
          .click(function () {
            $("div").fadeOut(1000, function () {
              alert("淡出完毕");
            });
          });
        $("button")
          .eq(2)
          .click(function () {
            $("div").fadeToggle(1000, function () {
              alert("切换完毕");
            });
          });
        $("button")
          .eq(3)
          .click(function () {
            $("div").fadeTo(1000, 0.5, function () {
              alert("淡入到完毕");
            });
          });
      });
    </script>
  </head>
  <body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>淡入到</button>
    <div></div>
  </body>
</html>

弹窗广告

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 14:17:36
 * @LastEditTime: 2020-06-17 14:29:08
 * @FilePath: \代码\46-弹窗广告.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .ad {
        position: fixed;
        right: 0;
        bottom: 0;
        display: none;
      }
      .ad > span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: red;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        // 1. 监听span的点击事件、
        $("span").click(function () {
          $(".ad").remove();
        });

        // 2. 执行广告动画
        // $(".ad").slideDown(1000, function () {
        //   $(".ad").delay(5000);
        //   $(".ad").fadeOut(3000);
        // });

        $(".ad").slideDown(1000).delay(5000).fadeOut(3000);
      });
    </script>
  </head>
  <body>
    <div class="ad">
      <img src="images/BB14xSko.jpg" alt="" />
      <span></span>
    </div>
  </body>
</html>

jQuery自定义动画

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 14:30:58
 * @LastEditTime: 2020-06-17 14:56:58
 * @FilePath: \代码\47-jQuery自定义动画.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>47-jQuery自定义动画</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background: red;
      }
      .two {
        background: blue;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            /*
            $(".one").animate(
              {
                width: 500,
              },
              1000,
              function () {
                alert("自定义动画执行完毕");
              }
            );
            */
            $(".one").animate(
              {
                marginLeft: 500,
              },
              5000,
              function () {}
            );
            /*
              第一个参数：接收一个对象，可以在对象中修改属性
              第二个参数：指定动画时长
              第三个参数：指定动画节奏，默认为swing
              第四个参数：动画执行完毕之后的回调函数
            */
            $(".two").animate(
              {
                marginLeft: 500,
              },
              5000,
              "linear",
              function () {}
            );
          });
        $("button")
          .eq(1)
          .click(function () {
            $(".one").animate(
              {
                width: "+=100",
              },
              1000,
              function () {}
            );
          });
        $("button")
          .eq(2)
          .click(function () {
            $(".one").animate(
              {
                // width: "hide",
                width: "toggle",
              },
              1000,
              function () {}
            );
          });
      });
    </script>
  </head>
  <body>
    <button>操作属性</button>
    <button>累加属性</button>
    <button>关键字</button>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

jQuery的stop和delay方法

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 14:58:28
 * @LastEditTime: 2020-06-17 15:19:02
 * @FilePath: \代码\48-jQuery的stop和delay方法.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>48-jQuery的stop和delay方法</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .one {
        width: 100px;
        height: 100px;
        background: red;
      }
      .two {
        width: 500px;
        height: 10px;
        background: blue;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        $("button")
          .eq(0)
          .click(function () {
            /*
             在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行
             */
            /*
            $(".one").animate(
              {
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 500,
              },
              1000
            );
            */
            /*
            $(".one")
              .animate(
                {
                  width: 500,
                },
                1000
              )
              .delay(2000)
              .animate(
                {
                  height: 500,
                },
                1000
              );
              */

            $(".one").animate(
              {
                width: 500,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                width: 100,
                // height: 500,
              },
              1000
            );
            $(".one").animate(
              {
                height: 100,
              },
              1000
            );
          });
        $("button")
          .eq(1)
          .click(function () {
            // 立即停止当前动画，继续执行后续动画
            // $("div").stop();
            // $("div").stop(false);
            // $("div").stop(false, false);

            // 立即停止当前和后续所有的动画
            // $("div").stop(true);
            // $("div").stop(true, false);

            // 立即完成当前的，继续执行后续动画
            // $("div").stop(false, true);

            // 立即完成当前的，并且停止后续所有的
            $("div").stop(true, true);
          });
      });
    </script>
  </head>
  <body>
    <button>开始动画</button>
    <button>停止动画</button>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

图标特效

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 15:21:54
 * @LastEditTime: 2020-06-17 17:20:00
 * @FilePath: \代码\49-图标特效.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>49-图标特效</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 400px;
        height: 250px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      ul > li {
        width: 100px;
        height: 50px;
        margin-top: 50px;
        text-align: center;
        float: left;
        overflow: hidden;
      }
      ul > li > span {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: red;
        position: relative;
        /* top: 50px; */
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        // 2. 监听li移入事件
        $("li").mouseenter(function () {
          // 2.1 将图标往上移动
          $(this)
            .children("span")
            .animate(
              {
                top: -50,
              },
              1000,
              function () {
                // 2.2 将图片往下移动
                $(this).css("top", "50px");
                // 2.3 将图片复位
                $(this).animate(
                  {
                    top: 0,
                  },
                  1000
                );
              }
            );
        });
      });
    </script>
  </head>
  <body>
    <ul>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
      <li>
        <span></span>
        <p>百度</p>
      </li>
    </ul>
  </body>
</html>

无限循环滚动案例

<!--
 * @Author: 码小余
 * @Date: 2020-06-17 17:23:12
 * @LastEditTime: 2020-06-17 18:31:49
 * @FilePath: \代码\51-无限循环滚动下.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>50-无限循环滚动</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 600px;
        height: 161px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }
      ul {
        list-style: none;
        width: 1800px;
        height: 161px;
        background: #000;
      }
      ul > li {
        width: 300px;
        height: 161px;
        background: yellow;
        font-size: 50px;
        float: left;
        text-align: center;
        line-height: 161px;
      }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
      // 编写jQuery代码
      $(function () {
        // 0. 定义变量保存偏移位
        var offset = 0;
        // 1. 让图片滚动起来
        var timer;
        function autoPlay() {
          timer = setInterval(function () {
            offset -= 1;
            if (offset <= -1200) {
              offset = 0;
            }
            $("ul").css("marginLeft", offset);
          }, 1);
        }
        autoPlay();
        // 2. 监听li的移入移除事件
        $("li").hover(
          function () {
            // 停止滚动
            clearInterval(timer);
            // 给非当前选中添加蒙版
            $(this).siblings().fadeTo(100, 0.5);
            // 去除当前选中的蒙版
            $(this).fadeTo(100, 1);
          },
          function () {
            // 继续滚动
            autoPlay();
            // 去除所有的蒙版
            $("li").fadeTo(100, 1);
          }
        );
      });
    </script>
  </head>
  <body>
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </body>
</html>

码小余の博客

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery初识 - jQuery案例练习

jQuery事件委托什么是事件委托请别人帮忙做事情，然后将做完的结果反馈给我们在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。jQuery移入移出事件mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件mouseenter/mouserleave事件，子元素被移入移出不会触发父元素的事件（推荐使用）电影排行榜案例<!-- * @Author: 码小余
复制链接

扫一扫