jQuery第3天知识点：jQuery 属性操作、jQuery三组基本动画、自定义动画animate

最新推荐文章于 2021-09-11 01:56:55 发布

库库好困

最新推荐文章于 2021-09-11 01:56:55 发布

阅读量274

点赞数

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

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

版权

四：jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、jQuery 属性操作

设置或获取元素固有属性值 prop()

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

1. 获取属性语法

prop(''属性'')

2. 设置属性语法

prop(''属性'', ''属性值'')

代码演示

<body>
    <input type="checkbox" checked>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 点击input的时候，来获取到input的选中状态（就是在获取checked属性值）
            $('input').click(function() {
                console.log($(this).attr('checked'));  //显示undefined 在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。
                console.log($(this).prop('checked'));
            })

            // 另外说法：
            // attr方法操作标签的自定义属性
            // prop方法操作标签的固有属性（src title alt checked ...)
        })
    </script>
</body>

案例：购物车案例模块-全选

分析
① 全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
② 因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
③ 把全选按钮状态赋值给3小复选框就可以了。
④ 当我们每次点击小的复选框按钮，就来判断：
⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
⑥ :checked 选择器 :checked 查找被选中的表单元素。

在这里插入图片描述

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>菜名</th>
          <th>饭店</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧肉</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧狮子头</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>日式肥牛</td>
          <td>田老师</td>
        </tr>

      </tbody>
    </table>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    //   先写入口函数
    $(function() {
        // 分析：
        // 1.点击全选来控制下面四个input的选中状态（checked属性 ==> prop()方法）
            // 和全选的选中状态一致


        // 找对象
        var $all = $('#j_cbAll');
        var $inps = $('#j_tb input');

        $all.click(function() {
            // 1.先获取全选选中状态
            var res = $(this).prop('checked');

            // 1.2控制下面四个input
            $inps.prop('checked', res);
        })


        // 2.点击下面input反过来控制上面的全选的选中状态
            // 如果四个选中则全选选中
            // 否则，只要有一个没有被选中，全选就不用选中

        $inps.click(function() {

            var len = $('#j_tb input:checked').length;
            // 是四个input里面选中的 ==> :checked
            // 要想知道多少个input选中，通过length属性获取结果
            if(len === 4) {
                //四个选中则全选选中
                $all.prop('checked', true);
            } else {
                // 至少有一个没有被选中，全选就不用选中
                $all.prop('checked', false);
            }
        })
    })
  </script>
</body>

代码优化

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>菜名</th>
          <th>饭店</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧肉</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧狮子头</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>日式肥牛</td>
          <td>田老师</td>
        </tr>

      </tbody>
    </table>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
    //   先写入口函数
    $(function() {
        // 分析：
        // 1.点击全选来控制下面四个input的选中状态（checked属性 ==> prop()方法）
            // 和全选的选中状态一致


        // 找对象
        var $all = $('#j_cbAll');
        var $inps = $('#j_tb input');

        $all.click(function() {
            // 优化01
            $inps.prop('checked', $(this).prop('checked'));
        })


        // 2.点击下面input反过来控制上面的全选的选中状态
            // 如果四个选中则全选选中
            // 否则，只要有一个没有被选中，全选就不用选中

        $inps.click(function() {

            var len = $('#j_tb input:checked').length;
            // 是四个input里面选中的 ==> :checked
            // 要想知道多少个input选中，通过length属性获取结果
            // if(len === 4) {
            //     //四个选中则全选选中
            //     $all.prop('checked', true);
            // } else {
            //     // 至少有一个没有被选中，全选就不用选中
            //     $all.prop('checked', false);
            // }

            // 优化02
            $all.prop('checked', len === $inps.length);
        })
    })
  </script>
</body>

二、jQuery动画

jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。

1. 三组基本动画

显示(show)与隐藏(hide)是一组动画：滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

在这里插入图片描述

显示隐藏效果

1. 显示语法规范

show([speed,[easing],[fn]])

显示参数

（1）参数都可以省略，无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 隐藏语法规范

hide([speed,[easing],[fn]])

显示参数

3. 切换语法规范

toggle([speed,[easing],[fn]])

切换参数

代码演示

    <style>
        div {
            width: 300px;
            height: 500px;
            background-color: pink;
            display: none;
        }
    </style>

</head>
<body>
    <button>展示</button>
    <button>隐藏</button>
    <button>显示隐藏切换</button>

    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 第一组：
            // show()  hide()  toggle()
            // 展示     隐藏     切换
            // 展示
            $('button').eq(0).click(function() {
                $('div').show(200);
            })
            // 隐藏
            $('button').eq(1).click(function() {
                $('div').hide(200, function() {
                    alert('哈哈哈');
                });
            })
            // 显示隐藏切换
            $('button').eq(2).click(function() {
                $('div').toggle(200, function() {
                    alert('这是来回切换功能哦');
                });
            })
        })
    </script>
</body>

滑动效果

1. 下滑效果语法规范

slideDown([speed,[easing],[fn]])

下滑效果参数

（1）参数都可以省略。
（2）speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 上滑效果语法规范

slideUp([speed,[easing],[fn]])

上滑效果参数

（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

滑动切换效果参数

代码演示

    <style>
        div {
            width: 300px;
            height: 500px;
            background-color: pink;
            display: none;
        }
    </style>

</head>
<body>
    <button>向下展开</button>
    <button>向上收起</button>
    <button>切换</button>

    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 第二组：
            // slideDown()  slideUp()  slideToggle()
            //   向下展开      向上收起    切换
            // slide系列动画的参数同show系列参数
            // slide没有参数也有动画效果，默认为normal
            
            // 向下展开
            $('button').eq(0).click(function() {
                $('div').slideDown();
            })
            // 向上收起
            $('button').eq(1).click(function() {
                $('div').slideUp(500, function() {
                    console.log('这是向上收起');
                })
            })
            // 切换
            $('button').eq(2).click(function() {
                $('div').slideToggle('slow', function() {
                    console.log('这是来回切换哦！');
                })
            })
        })
    </script>
</body>

淡入淡出效果

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]])

淡入效果参数

2. 淡出效果语法规范

fadeOut([speed,[easing],[fn]])

淡出效果参数

3. 淡入淡出效果

fadeToggle([speed,[easing],[fn]])

淡入淡出切换效果参数

代码演示

    <style>
        div {
            width: 300px;
            height: 500px;
            background-color: pink;
            display: none;
        }
    </style>

</head>
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>

    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 第三组：
            // fadeIn()  fadeOut()  fadeToggle()
            //   淡入      淡出        切换
            // fade系列动画的参数同show系列参数
            // fade没有参数也有动画效果，默认为normal
            // 三个参数都是可选的

            // 淡入：
            $('button').eq(0).click(function() {
                $('div').fadeIn(500);
            })
            // 淡出：
            $('button').eq(1).click(function() {
                $('div').fadeOut(300, function() {
                    alert('哈哈哈，淡出了呢！');
                })
            })
            // 淡入淡出切换
            $('button').eq(2).click(function() {
                $('div').fadeToggle(200, function() {
                    console.log('哈哈哈哈，来回切换了哦');
                })
            })
        })
    </script>
</body>

动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
代码演示

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
            position: relative;
        }
    </style>
</head>
<body>
    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 动画队列：当给元素添加多个动画来执行的时候，会把动画效果添加到元素动画队列中，元素会按照队列的顺序依次取执行动画

            // 好处：
            // 可以使用动画队列实现一个有顺序的动画效果
            $('div').show().animate({left: 600}, 1000).animate({top: 300}, 1000);

            // 坏处：
            // 当给元素不停添加动画，其实就是动画队列中不停添加动画，元素会一直做动画
        })
    </script>
</body>

2. 停止排队

stop()

(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

代码演示

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: none;
            position: relative;
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <button>停止</button>
    <button>直接跳到正在执行的动画的最终状态</button>
    <div></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').slideDown(1000).slideUp(1000);
            })
            $('button').eq(1).click(function() {
                $('div').stop(true);
                // 没有加上true，会停止当前正在做的动画，转而做后续排队中的动画
                // 加上true之后，所有队列中的动画全部停止
            })

            // 停止后续动画：
            // stop有2个参数：
            // 1.clearQueue: 是否要清除动画队列 true为清除
            // 2.jumpToend：是否要跳转到当前动画的最终状态 true为跳转
            // 意味着都是可选的，默认值都是false

            // 直接跳到正在执行的动画的最终状态：
            $('button').eq(2).click(function() {
                $('div').stop(true, true);
            })
        })
    </script>
</body>

案例1-京东轮播图

在这里插入图片描述

  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;
    }
    
    .slider li {
      position: absolute;
      display: none;
    }

    /*表示第一个li*/
    .slider li:first-child {
      display: block;
    }
    
    
    .arrow {
      display: none;
    }
    
    .slider:hover .arrow {
      display: block;
    }
    
    .arrow-left,
    .arrow-right {
      font-family: "SimSun", "宋体";
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      cursor: pointer;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-weight: 700;
      font-size: 30px;
    }
    
    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgba(0, 0, 0, .5);
    }
    
    .arrow-left {
      left: 0;
    }
    
    .arrow-right {
      right: 0;
    }
  
  </style>
</head>
<body>
<div class="slider">
  <ul>
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
  </ul>
  <!--箭头-->
  <div class="arrow">
    <span class="arrow-left">&lt;</span>
    <span class="arrow-right">&gt;</span>
  </div>
</div>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function() {
    var abc = 0;  //表示当前展示的图片的下标，默认展示第一张，其下标为0

    var $lis = $('.slider li');
    // 点击右箭头，实现展示下一张图片功能
    $('.arrow-right').click(function() {
      abc++;
      // abc不能一直自增，需要让其展示最后一张的时候，点击右箭头回到第一张
      if (abc >= 8) {
        //8的由来==> $lis.length
        abc = 0;   //回到第一张操作，下标为0
      }
      $lis.eq(abc).fadeIn().siblings().fadeOut();
    })

    // 点击左箭头，实现展示上一张图片功能
    $('.arrow-left').click(function() {
      abc--;
      // abc不能一直自减
      if (abc < 0) {
        //展示最后一张 abc = 7 7的由来==> $lis.length-1
        abc = $lis.length-1;
      }
      $lis.eq(abc).fadeIn().siblings().fadeOut();
    })
  })
</script>
</body>

案例2-下拉菜单（优化）

在这里插入图片描述

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

        ul {
          list-style: none;
        }

        .wrap {
          width: 330px;
          height: 30px;
          margin: 100px auto 0;
          padding-left: 10px;
          background-image: url(imgs/bg.jpg);
        }

        .wrap li {
          background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
          float: left;
          margin-right: 10px;
          position: relative;
        }

        .wrap a {
          display: block;
          height: 30px;
          width: 100px;
          text-decoration: none;
          color: #000;
          line-height: 30px;
          text-align: center;
        }

        .wrap li ul {
          position: absolute;
          top: 30px;
          display: none;
        }
    </style>
</head>
<body>
    <div class="wrap">
      <ul>
        <li>
          <a href="javascript:void(0);">一级菜单1</a>
          <ul class="ul">
            <li><a href="javascript:void(0);">二级菜单11</a></li>
            <li><a href="javascript:void(0);">二级菜单12</a></li>
            <li><a href="javascript:void(0);">二级菜单13</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单2</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单21</a></li>
            <li><a href="javascript:void(0);">二级菜单22</a></li>
            <li><a href="javascript:void(0);">二级菜单23</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单3</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单31</a></li>
            <li><a href="javascript:void(0);">二级菜单32</a></li>
            <li><a href="javascript:void(0);">二级菜单33</a></li>
          </ul>
        </li>
      </ul>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
        // 思路：
        // 1.找到三个一级菜单的li
        // 2.注册mouseenter事件，让当前li下的ul显示
        // 3.注册mouseleave事件，让当前li下的ul隐藏
        $(function(){
            var $lis = $('.wrap > ul > li');

            // 鼠标移动到对应的一级菜单，则显示二级菜单
            $lis.mouseenter(function() {
                $(this).children('ul').stop().slideDown(300);
            })

            // 鼠标离开对应的一级菜单，则隐藏二级菜单
            $lis.mouseleave(function() {
                $(this).children('ul').stop().slideUp(300);
            })
        })
    </script>
</body>

2. 自定义动画 animate

1. 语法

animate(params,[speed],[easing],[fn])

参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

代码演示

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div>swing</div>
    <div>linear</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function() {
            // 自定义动画 animate()
            // animate({}, speed, easing(swing/linear), callback);
            // 第一个参数写对象，对象里面是键值对。表示需要做的动画效果，该参数必须要写
            // 后面三个都是可选的，同show系列参数

            $('div').eq(0).click(function() {
                $(this).animate({
                    top: 300,
                    left: 500
                }, 1000)
            })

            // 对比easing的值
            // 1.swing 慢-快-慢 默认值
            // 2.linear 匀速
            $('div').eq(1).animate({
                left: 600
            }, 6000, 'swing')

            $('div').eq(2).animate({
                left: 600
            }, 6000, 'linear')
        })
    </script>
</body>

案例：手风琴效果

在这里插入图片描述

    <style>
        * {
           margin: 0;
           padding: 0;
         }
     
         ul {
           list-style: none;
           width: 1300px;
         }
     
         #box {
           width: 1200px;
           height: 400px;
           border: 2px solid red;
           margin: 100px auto;
         }
     
         #box li {
           width: 240px;
           height: 400px;
           /*border: 1px solid #000;*/
           float: left;
         }
     
         #box li:nth-child(1) {
           background-image: url(./images/1.jpg);
         }
     
         #box li:nth-child(2) {
           background-image: url(./images/2.jpg);
         }
     
         #box li:nth-child(3) {
           background-image: url(./images/3.jpg);
         }
     
         #box li:nth-child(4) {
           background-image: url(./images/4.jpg);
         }
     
         #box li:nth-child(5) {
           background-image: url(./images/5.jpg);
         }    
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        // 先写入口函数：
        $(function() {
            // 分析：
            // 1.鼠标移入li上，让当前的li做动画，改width为800，兄弟li变成100
            // 3.给li注册mouseleave事件，会给所有的li都设置上相同的样式

            var $lis = $('#box li');

            $lis.mouseenter(function() {
              // 遇到动画抽风问题，就在每次动画前加上stop（）
                $(this).stop().animate({width: 800}).siblings().stop().animate({width: 100});
            })

            $('#box').mouseleave(function() {
                $lis.stop().animate({
                    width: 240
                })
            })
        })
    </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 index = 0;
            var arrs = ["1.jpg", "2.jpg", "3.jpg"];
            $(".maps img").click(function () {
                index++;
                if (index === arrs.length) {
                    index = 0;
                }
                $(this).attr("src", arrs[index])
            })

            // 给nav下的所有的li注册mouseenter事件， 让当前li下的span做自定义动画，top=0，播放对应的音频
            // 给nav下的所有的li注册mouseleave事件， 让当前li下的span做自定义动画，top=60

            $(".nav li").mouseenter(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 0 });

                // 找到当前元素的下标
                var idx = $(this).index();

                // 添加音乐的播放
                // play 方法是H5提供的，jq并没有封装对应的方法，所以需要将jq对象转成dom对象
                // 需让让鼠标经过的时候，重新开启这个音频文件的播放
                // load 方式是H5提供的，让当前资源重新去加载。
                $(".mp3 audio").get(idx).load();
                $(".mp3 audio").get(idx).play();
            })

            $(".nav li").mouseleave(function () {
                // stop() 保证停止当前正在执行的动画，让添加的动画立即执行
                $(this).children("span").stop().animate({ top: 60 });
            })
        })
    </script>
</body>

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第3天知识点：jQuery 属性操作、jQuery三组基本动画、自定义动画animate

一、jQuery 属性操作设置或获取元素固有属性值 prop()在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。1. 获取属性语法prop(''属性'')2. 设置属性语法prop(''属性'', ''属性值'')代码演示<body> <input typ
复制链接

扫一扫

专栏目录