---
# System prepended metadata

title: jQuery第二章
tags: [第二章, jQuery]

---

---
tags: jQuery,第二章
---
# jQuery第二章
## 鏈式編成
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
      $('button').click(function () {
        $(this).css('color', 'red');
        $(this).siblings().css('color', '');
      });
    </script>
  </body>
</html>
```
```javascript=
    <script>
      $('button').click(function () {
        // $(this).css('color', 'red');
        // $(this).siblings().css('color', '');
        $(this).css('color', 'red').siblings().css('color', '');
      });
    </script>
```
## 基本修改css屬性
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      console.log($('div').css('width')); // 200px
      $('div').css('width', '300px');
      $('div').css('height', 300); // '300px'改成300是可以的
      $('div').css({
        width: 400,
        height: 400,
        backgroundColor: 'red'
      });
    </script>
  </body>
</html>
```
## 修改css的類
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      div {
        width: 150px;
        height: 150px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.5s;
      }
      .current {
        background-color: red;
        transform: rotate(360deg);
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      $('div').click(function () {
        // $(this).addClass('current');
      });
      $('div').click(function () {
        // $(this).removeClass('current');
      });
      $('div').click(function () {
        $(this).toggleClass('current');
      });
    </script>
  </body>
</html>
```
## tab欄切換製作
```html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      /* 全體樣式 */
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      /* 全體樣式 */
      /* 最外框 */
      .tab {
        position: relative;
        margin: 100px auto;
        width: 1000px;
        height: 1000px;
        background-color: pink;
      }
      /* 最外框 */
      /* 標題欄 */
      .tab_list {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1000px;
        height: 39px;
        background-color: lightgreen;
      }
      .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
      }
      .tab_list .current {
        background-color: red;
        color: #fff;
      }
      /* 標題欄 */
      /* 內容欄 */
      .tab_con {
        position: absolute;
        left: 25%;
        top: 25%;
        width: 500px;
        height: 500px;
        background-color: skyblue;
      }
      /* 內容欄 */
      /* 內容小調整 */
      .item {
        display: none;
        text-align: center;
        line-height: 500px;
      }
      /* 內容小調整 */
    </style>
  </head>
  <body>
    <div class="tab">
      <div class="tab_list">
        <ul>
          <li class="current">商品介紹</li>
          <li>規格與包裝</li>
          <li>售後保障</li>
          <li>商品評價</li>
          <li>手機社區</li>
        </ul>
      </div>
      <div class="tab_con">
        <div class="item" style="display: block">商品介紹模塊內容</div>
        <div class="item">規格與包裝模塊內容</div>
        <div class="item">售後保障模塊內容</div>
        <div class="item">商品評價模塊內容</div>
        <div class="item">手機社區模塊內容</div>
      </div>
    </div>
    <script>
      $('.tab_list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var index = $(this).index();
        console.log(index);
        $('.tab_con .item').eq(index).show().siblings().hide();
      });
    </script>
  </body>
</html>
```
## 類操作細節
原生JS中className會覆蓋元素原先的類名
jQuery類操作只會對指定類操作，不影響原先類名
```html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      .one {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      .two {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="one two"></div>
    <script>
      //   var one = document.querySelector('.one');
      //   one.className = 'two';
      //   $('.one').addClass('two');
      //   $('.one').removeClass('two');
    </script>
  </body>
</html>
```
## 顯示隱藏效果
https://jquery.cuishifeng.cn/
![](https://i.imgur.com/PEI9vKC.jpg)
![](https://i.imgur.com/IbX3RIM.jpg)
```html=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      div {
        width: 100px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
      $('button')
        .eq(0)
        .click(function () {
          $('div').show(1000, function () {
            alert(1);
          });
        });
      $('button')
        .eq(1)
        .click(function () {
          $('div').hide(1000, function () {
            alert(1);
          });
        });
      $('button')
        .eq(2)
        .click(function () {
          $('div').toggle(1000);
        });
    </script>
  </body>
</html>
```
## 滑動效果
![](https://i.imgur.com/SSXkNbO.jpg)
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <style>
      div {
        width: 100px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
      $('button')
        .eq(0)
        .click(function () {
          $('div').slideDown();
        });
      $('button')
        .eq(1)
        .click(function () {
          $('div').slideUp(500);
        });
      $('button')
        .eq(2)
        .click(function () {
          $('div').slideToggle(100);
        });
    </script>
  </body>
</html>
```
## 事件切換
```css=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全體樣式 */
      a {
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      /* 全體樣式 */
      /* 最外框 */
      .nav {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        /* width: 1000px; */
        height: 2000px;
        background-color: pink;
      }
      /* 最外框 */
      /* 標題格子 */
      .nav > li {
        float: left;
        border: 2px solid black;
        border-right: none;
        width: 200px;
        height: 200px;
        background-color: yellow;
        text-align: center;
        line-height: 200px;
      }
      .nav > li:nth-last-child(1) {
        border-right: 2px solid black;
      }
      .nav > li > a {
        display: inline-block;
        width: 200px;
        height: 200px;
        font-size: 100px;
      }
      .nav > li > a:hover {
        background-color: #eee;
      }
      /* 標題格子 */
      /* 下拉菜單母體 */
      .menu {
        display: none;
        position: relative;
        top: -28px;
        left: -42px;
        width: 200px;
        height: 200px;
      }
      /* 下拉菜單母體 */
      /* 下拉菜單小格子 */
      .menu li {
        border: 2px solid black;
        border-bottom: none;
        width: 200px;
        height: 200px;
        background-color: green;
      }
      .menu li:nth-last-child(1) {
        border-bottom: 2px solid black;
      }
      .menu li a {
        display: inline-block;
        width: 200px;
        height: 200px;
        font-size: 100px;
      }
      .menu li a:hover {
        background-color: #fff;
      }
      /* 下拉菜單小格子 */
    </style>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">微博</a>
        <ul class="menu">
          <li><a href="">私信</a></li>
          <li><a href="">評論</a></li>
          <li><a href="">我的</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul class="menu">
          <li><a href="">私信</a></li>
          <li><a href="">評論</a></li>
          <li><a href="">我的</a></li>
        </ul>
      </li>
      <li>
        <a href="#">微博</a>
        <ul class="menu">
          <li><a href="">私信</a></li>
          <li><a href="">評論</a></li>
          <li><a href="">我的</a></li>
        </ul>
      </li>
    </ul>
  </body>
  <script>
    $('.nav>li').mouseover(function () {
      $(this).children('ul').show();
    });
    $('.nav>li').mouseout(function () {
      $(this).children('ul').hide();
    });
  </script>
</html>
```
```javascript=
   $('.nav>li').hover(
      function () {
        $(this).children('ul').slideDown(200);
      },
      function () {
        $(this).children('ul').slideUp(200);
      }
    );
```
```javascript=
    $('.nav>li').hover(function () {
      $(this).children('ul').slideToggle(200);
    });
```
## 停止動畫
承上
stop()寫在動畫前面
```javascript=
    $('.nav>li').hover(function () {
      $(this).children('ul').stop().slideToggle(200);
    });
```
## 淡入淡出
![](https://i.imgur.com/phHQepV.jpg)
![](https://i.imgur.com/RKlrTdL.jpg)
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 150px;
        height: 300px;
        background-color: pink;
        display: none;
      }
    </style>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切換</button>
    <button>修改透明度</button>
    <div></div>
    <script>
      $('button')
        .eq(0)
        .click(function () {
          $('div').fadeIn(1000);
        });
      $('button')
        .eq(1)
        .click(function () {
          $('div').fadeOut(1000);
        });
      $('button')
        .eq(2)
        .click(function () {
          $('div').fadeToggle(1000);
        });
      $('button')
        .eq(3)
        .click(function () {
          $('div').fadeTo(1000, 0.5);
        });
    </script>
  </body>
</html>
```
## 突出顯示案例
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: black;
      }
      .wrap {
        width: 908px;
        height: 604px;
        margin: 100px auto;
        border: 2px solid white;
        padding: 5px;
      }
      .wrap li {
        vertical-align: middle;
        display: inline-block;
      }
    </style>
    <script src="jQuery.min.js"></script>
    <script>
      $(function () {
        $('.wrap li').hover(
          function () {
            $(this).siblings().stop().fadeTo(400, 0.5);
          },
          function () {
            $(this).siblings().stop().fadeTo(400, 1);
          }
        );
      });
    </script>
  </head>
  <body>
    <div class="wrap">
      <ul>
            <li><a href="#"><img src="./p025-1images/image01.jpg" alt=""></a></li>
            <li><a href="#"><img src="./p025-1images/image02.jpg" alt=""></a></li>
            <li><a href="#"><img src="./p025-1images/image03.jpg" alt=""></a></li>
            <li><a href="#"><img src="./p025-1images/image04.jpg" alt=""></a></li>
            <li><a href="#"><img src="./p025-1images/image05.jpg" alt=""></a></li>
            <li><a href="#"><img src="./p025-1images/image06.jpg" alt=""></a></li>    
      </ul>
    </div>
  </body>
</html>
```
## 自定義動畫
![](https://i.imgur.com/jBxiQUK.jpg)
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: absolute;
        width: 300px;
        height: 300px;
        background-color: pink;
      }
    </style>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <button>動起來</button>
    <div></div>
    <script>
      $('button').click(function () {
        $('div').animate(
          {
            left: 500,
            top: 300,
            opacity: 0.4,
            width: 500,
            height: 500
          },
          100
        );
      });
    </script>
  </body>
</html>
```
## 手風琴效果圖
```javascript=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局設定 */
      * {
        padding: 0;
        margin: 0;
      }
      a {
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      /* 全局設定 */
      .king {
        position: relative;
        width: max-content;
        height: 69px;
        background-color: skyblue;
        margin: 300px auto;
        overflow: hidden;
      }
      .king li {
        float: left;
        position: relative;
        display: block;
        width: 69px;
        height: 69px;
      }
      .king li a {
        position: relative;
        display: block;
      }
      .king li.current {
        width: 224px;
      }
      .king li.current .big {
        display: block;
      }
      .king li.current .small {
        display: none;
      }
      .big {
        width: 224px;
        display: none;
      }
      .small {
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
      }
    </style>
    <script src="jQuery.min.js"></script>
  </head>
  <body>
    <div class="king">
      <ul>
        <li class="current"><a href="#"><img src="./p028images/s1.png" alt="" class="small"><img src="./p028images/b1.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s2.png" alt="" class="small"><img src="./p028images/b2.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s3.png" alt="" class="small"><img src="./p028images/b3.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s4.png" alt="" class="small"><img src="./p028images/b4.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s5.png" alt="" class="small"><img src="./p028images/b5.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s6.png" alt="" class="small"><img src="./p028images/b6.png" alt="" class="big"></a></li>
            <li><a href="#"><img src="./p028images/s7.png" alt="" class="small"><img src="./p028images/b7.png" alt="" class="big"></a></li>
      </ul>
    </div>
    <script>
      $('.king li').mouseenter(function () {
        $(this)
          .stop()
          .animate({
            width: 224
          })
          .find('.small')
          .stop()
          .fadeOut()
          .siblings('.big')
          .stop()
          .fadeIn();
        $(this)
          .siblings('li')
          .stop()
          .animate({
            width: 69
          })
          .find('.small')
          .stop()
          .fadeIn()
          .siblings('.big')
          .stop()
          .fadeOut();
      });
    </script>
  </body>
</html>

```