jQuery第五天案例

最新推荐文章于 2022-05-06 14:54:06 发布

库库好困

最新推荐文章于 2022-05-06 14:54:06 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/m0_46597922/article/details/106698157

版权

四：jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

案例-五角星评分（仿五星好评）

在这里插入图片描述
分析：

鼠标移入到li
让当前的li和前面所有的li都变成实心效果
让当前后面所有的变成空心效果
鼠标移出ul，让所有的li恢复成空心效果
鼠标点击li
效果：点击之后，鼠标在移出，点击的那个li以及前面所有的li是实心效果
核心的事情，点击的时候做了啥
给点击的li添加标记
1. 类名
2. 下标

代码演示：

    <title>五角星评分案例</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    .comment {
        font-size: 40px;
        color: #ff16cf;
    }

    .comment li {
        float: left;
    }

    ul {
        list-style: none;
    }
    </style>
</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function() {
        // 功能
        //  1. 鼠标移入到li
        //      让当前的li和前面所有的li都变成实心效果
        //      让当前后面所有的变成空心效果
        //  2. 鼠标移出ul，让所有的li恢复成空心效果
        //  3. 鼠标点击li
        //      效果：点击之后，鼠标在移出，点击的那个li以及前面所有的li是实心效果
        // 核心的事情，点击的时候做了啥
        //  给点击的li添加标记
        //  1. 类名
        //  2. 下标

        // 1.
        var $lis = $(".comment li");
        var wjx_s = "★";
        var wjx_k = "☆";

        $lis.on("mouseenter", function() {
            $(this).text(wjx_s); // 当前的
            $(this).prevAll().text(wjx_s); // 前面所有的li
            $(this).nextAll().text(wjx_k); // 后面所有的li

            // prev() 上一个兄弟
            // prevAll() 前面所有的
            // nextAll() 后面所有的

            // console.log( $(this).prevAll() );
        })

        // 2.
        $(".comment").on("mouseleave", function () {
            $lis.text(wjx_k); // 所有的li空心

            // 找带有active类名的li ==> 实心效果
            $(".comment li.active").text(wjx_s).prevAll().text(wjx_s);
        })

        // 3.
        $lis.on("click", function () {
            // 给当前点击的li元素做标记 ==> 类名
            //  标记只能是当前点击的元素才有，兄弟们没有（移除类名操作）
            $(this).addClass("active").siblings().removeClass("active");
        })
    });
    </script>
</body>

五角星评分-链式编程

代码演示：

    <style>
    * {
        padding: 0;
        margin: 0;
    }

    .comment {
        font-size: 40px;
        color: #ff16cf;
    }

    .comment li {
        float: left;
    }

    ul {
        list-style: none;
    }
    </style>
</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function() {
        // 1.
        var $lis = $(".comment li");
        var wjx_s = "★";
        var wjx_k = "☆";

        $lis.on("mouseenter", function() {
            // $(this).text(wjx_s); // 当前的
            // $(this).prevAll().text(wjx_s); // 前面所有的li
            // $(this).nextAll().text(wjx_k); // 后面所有的li


            // console.log($(this).text(wjx_s)); // 返回 $(this)
            // console.log( $(this).text(wjx_s).prevAll().text(wjx_s) ); // $(this).prevAll();

            // 以上代码实现3合1
            // 有问题的，nextAll() 在prevAll基础上去查找的
            // 本该让nextAll在$(this)去查找
            // $(this).text(wjx_s).prevAll().text(wjx_s).nextAll().text(wjx_k);

            // prevObject属性：上一次返回的jq对象
            // end() 方法封装了prevObject属性
            // $(this).text(wjx_s).prevAll().text(wjx_s).prevObject.nextAll().text(wjx_k);

            $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
        })

        // 2.
        $(".comment").on("mouseleave", function () {
            $lis.text(wjx_k); // 所有的li空心

            // 找带有active类名的li ==> 实心效果
            $(".comment li.active").text(wjx_s).prevAll().text(wjx_s);
        })

        // 3.
        $lis.on("click", function () {
            // 给当前点击的li元素做标记 ==> 类名
            //  标记只能是当前点击的元素才有，兄弟们没有（移除类名操作）
            $(this).addClass("active").siblings().removeClass("active");
        })
    });
    </script>
</body>

案例-钢琴案例（支持键盘）加强版

在这里插入图片描述
代码演示：

    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav {
        width: 700px;
        height: 60px;
        background-color: black;
        margin: 0 auto;
    }

    .maps {
        width: 700px;
        text-align: center;
    }

    .maps img {
        width: 80%;
        margin-top: 30px;
    }

    .nav li {
        width: 100px;
        height: 60px;
        /*border: 1px solid yellow;*/
        float: left;
        position: relative;
        overflow: hidden;
    }

    .nav a {
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 24px;
        color: blue;
        text-align: center;
        line-height: 60px;
        text-decoration: none;
        z-index: 2;
    }

    .nav span {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: yellow;
        top: 60px;
    }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="javascript:void(0);">导航1</a>
                <span></span>
            </li>
            <li><a href="javascript:void(0);">导航2</a><span></span></li>
            <li><a href="javascript:void(0);">导航3</a><span></span></li>
            <li><a href="javascript:void(0);">导航4</a><span></span></li>
            <li><a href="javascript:void(0);">导航5</a><span></span></li>
            <li><a href="javascript:void(0);">导航6</a><span></span></li>
            <li><a href="javascript:void(0);">导航7</a><span></span></li>
        </ul>
        <div class="maps">
            <img src="1.jpg" alt="">
        </div>
        <div class="mp3">
            <audio src="./mp3/1.mp3"></audio>
            <audio src="./mp3/2.mp3"></audio>
            <audio src="./mp3/3.mp3"></audio>
            <audio src="./mp3/4.mp3"></audio>
            <audio src="./mp3/5.mp3"></audio>
            <audio src="./mp3/6.mp3"></audio>
            <audio src="./mp3/7.mp3"></audio>
        </div>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script>
    $(function() {
        var $lis = $(".nav li");
        var $audios = $(".mp3 audio");

        $lis.mouseenter(function() {
            $(this).children("span").stop().animate({ top: 0 });
            
            var idx = $(this).index();

            $audios[idx].load();
            $audios[idx].play();
        })

        $lis.mouseleave(function() {
            $(this).children("span").stop().animate({ top: 60 });
        })
        // keydown时间存在的问题：按下不松手，该事件会一直触发
        // 希望实现的效果：按下不松手，keydown触发一次

        // 节流阀：限制事件的触发执行
        // 使用套路：
        // 1.定义阀门，明确初始状态（开还是关）
        // 2.明确什么时候开，什么时候关
        var flag = true;  //表示阀门，对keydown做限制，一开始是开着的

        $(document).on("keydown", function (e) {

            if(flag) {
                //if成立，说明flag为true ==> 阀门是开着的


                // 通过事件对象e的keyCode得知按了什么键
                var code = e.keyCode; // 数字1-7号键 键盘码 49-55
                // console.log(code);

                // 把键盘码转成对应的下标
                var idx = code - 49;
                $lis.eq(idx).mouseenter();


                // 按过之后把阀门关闭
                flag = false;
            }


        })

        $(document).on("keyup", function (e) {
             // 通过事件对象e的keyCode得知按了什么键
            var code = e.keyCode; // 数字1-7号键 键盘码 49-55
            // console.log(code);

            var idx = code - 49;
            $lis.eq(idx).trigger("mouseleave");



            // 弹起之后为了以后还可以按键，需要把阀门重新打开
            flag = true;

        })
    })
    </script>
</body>

案例-表格删除功能

在这里插入图片描述
代码演示：

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 410px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "Î¢ÈíÑÅºÚ";
      color: #fff;
    }
    
    td {
      font: 14px "Î¢ÈíÑÅºÚ";
    }
    
    td a.get {
      text-decoration: none;
    }
    
    a.del:hover {
      text-decoration: underline;
    }
    
    tbody tr {
      background-color: #f0f0f0;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
    
    .btnAdd {
      width: 110px;
      height: 30px;
      font-size: 20px;
      font-weight: bold;
    }
    
    .form-item {
      height: 100%;
      position: relative;
      padding-left: 100px;
      padding-right: 20px;
      margin-bottom: 34px;
      line-height: 36px;
    }
    
    .form-item > .lb {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100px;
      text-align: right;
    }
    
    .form-item > .txt {
      width: 300px;
      height: 32px;
    }
    
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.15;
      display: none;
    }
    
    .form-add {
      position: fixed;
      top: 30%;
      left: 50%;
      margin-left: -197px;
      padding-bottom: 20px;
      background: #fff;
      display: none;
    }
    
    .form-add-title {
      background-color: #f7f7f7;
      border-width: 1px 1px 0 1px;
      border-bottom: 0;
      margin-bottom: 15px;
      position: relative;
    }
    
    .form-add-title span {
      width: auto;
      height: 18px;
      font-size: 16px;
      font-family: ËÎÌå;
      font-weight: bold;
      color: rgb(102, 102, 102);
      text-indent: 12px;
      padding: 8px 0px 10px;
      margin-right: 10px;
      display: block;
      overflow: hidden;
      text-align: left;
    }
    
    .form-add-title div {
      width: 16px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 6px;
      font-size: 30px;
      line-height: 16px;
      cursor: pointer;
    }
    
    .form-submit {
      text-align: center;
    }
    
    .form-submit input {
      width: 170px;
      height: 32px;
    }
  </style>


</head>

<body>
  <div class="wrap">
    <input type="button" value="清空内容" id="btn">
    <input type="button" value="添加" id="btnAdd">
    <table>
      <thead>
        <tr>
          <th>课程名称</th>
          <th>所属学院</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>JavaScript</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>css</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <!-- <td><input type="checkbox"/></td> -->
          <td>html</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
        <tr>
          <td>jQuery</td>
          <td>传智播客-前端与移动开发学院</td>
          <td><a href="javascript:;" class="get">DELETE</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function () {
      // 清空 == 清空tbody里面的内容 empty()
      var $tbody = $('#j_tb');
      $('#btn').on('click', function() {
        $tbody.empty();
      })

      // 添加
      $('#btnAdd').on('click', function(){
        // 创建tr==添加到$tbody
        $('<tr><td>jquery is over</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" class="get">DELETE</a></td></tr>').prependTo($tbody);
      })

      // 删除 -- 需要删除当前对应的tr -- remove
      // 以下代码错误，不支持动态绑定
      // $('.get').on('click', function() {
      //   $(this).parent().parent().remove();
      // })

      // 注册事件委托
      // 给祖先元素（页面中本来就存在）注册，指定子元素触发
      $tbody.on('click', '.get', function() {
        // $(this).parent().parent().remove();

        // parent()：找父元素
        // parents()：找的是所有的祖先，通过参数来筛选
        $(this).parents('tr').remove();
      });
    });

  </script>
</body>

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第五天案例

案例-五角星评分（仿五星好评）分析：鼠标移入到li让当前的li和前面所有的li都变成实心效果让当前后面所有的变成空心效果鼠标移出ul，让所有的li恢复成空心效果鼠标点击li效果：点击之后，鼠标在移出，点击的那个li以及前面所有的li是实心效果核心的事情，点击的时候做了啥给点击的li添加标记类名下标代码演示： <title>五角星评分案例</title> <style> * { padding: 0
复制链接

扫一扫

专栏目录