jQuery自學筆記（21-30)

weixin_43614380發表於2020-11-18
jQuery筆記

目錄

21-22 class操作

1.給元素新增類

  • 新增單個類
    $('#div1').addClass('fontSize30');
  • 新增多個類
    $('#div1').addClass('fontSize30 width200');

2.給元素移除類

  • 移除單個類
    $('#div1').removeClass('fontSize30');
  • 移除多個類
    $('#div1').removeClass('fontSize30 width200');
  • 移除所有類
    $('#div1').removeClass();

3.判斷類

判斷一個元素有沒有某個類，如果有返回true，反之false

    console.log($('#div1').hasClass('fontSize30'));

4.切換類 (toggle(翻譯:切換))

如果元素有某個類，就移除這個類；若沒有，則新增這個類

    $('#div1').toggleClass('fontSize30');

23-tab欄切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab欄切換</title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }
    
    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }
    
    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }
    
    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }
    
    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }
    
    .products .main {
      float: left;
      display: none;
    }
    
    .products .main.selected {
      display: block;
    }
    
    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item">國際大牌<span>◆</span></li>
            <li class="tab-item">國妝名牌<span>◆</span></li>
            <li class="tab-item">清潔用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
              <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
            </div>
            <div class="main">
              <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
            </div>
            <div class="main">
              <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
            </div>
            <div class="main">
              <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
            </div>
          </div>
    </div>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function name(params) {
        $(".tab-item").mouseenter(function name(params) {
            //兩件事件
            $(this).addClass("active").siblings().removeClass("active");
            var idx = $(this).index();
            $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
        })
    })
</script>
</html>

24-jQuery動畫顯示和隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑入滑出</title>
    <style>

        div {
          width: 400px;
          height: 400px;
          background-color: pink;
          display: none;
        }
      </style>
</head>
<body>
    
<input type="button" value="顯示">
<input type="button" value="隱藏">
<input type="button" value="切換">

<div></div>
</body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
      
      $("input").eq(0).click(function () {
         
        //show不傳引數，沒有動畫效果
        //$("div").show();
        
        //show(speed)
        //speed:動畫的持續時間  可以是毫秒值 還可以是固定字串
        //fast:200ms   normal:400ms   slow:600
        //如果字串輸錯了，則預設是normal
        //$("div").show("ddd");
      
        // show([speed], [callback])
        $("div").show(1000, function () {
          alert("哈哈，動畫執行完成啦");
        })
        
      });
      
      
      $("input").eq(1).click(function () {
        // $("div").hide();//沒有引數就沒有動畫效果
        $("div").hide(2000);
      })

      //切換
      $("input").eq(2).click(function () {
        $("div").toggle(2000);
      })
      
    });
  </script>
</html>

25-jQuery動畫 滑入滑出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顯示隱藏切換</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
          display: none;
        }
      </style>
</head>
<body>
    
<input type="button" value="顯示">
<input type="button" value="隱藏">
<input type="button" value="切換">

<div></div>
</body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
      
      
      //滑入（slideDown）  滑出：slideU
      $("input").eq(0).click(function () {
        
        //slideDown：如果不傳引數，有一個預設值normal
        //$("div").slideDown();
        //$("div").slideDown(1000);
        $("div").slideDown(1000, function () {
          console.log("額呵呵");
        });
      });
      
      
      $("input").eq(1).click(function () {
        $('div').slideUp();
      })
    
    
      $("input").eq(2).click(function () {
        
        //如果是滑入狀態，就執行滑出的動畫，
        $('div').slideToggle();
      })
    });
  </script>
</html>

26-動畫版下拉選單

$(this).find(‘ul’).sildeUp(200); //給動畫函式加參數列示執行時間

27-jQuery淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淡入淡出</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          background-color: pink;
          display: none;
        }
      </style>
</head>
<body>
    
<input type="button" value="顯示">
<input type="button" value="隱藏">
<input type="button" value="切換">

<div></div>
</body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
      
      
      //淡入：fadeIn  淡出：fadeOut    切換：fadeToggle
      $("input").eq(0).click(function () {
        
        $("div").fadeIn(2000);
        
      });
      
      
      $("input").eq(1).click(function () {
        $("div").fadeOut(1000);
      })
      
      
      $("input").eq(2).click(function () {
        
        //如果是滑入狀態，就執行滑出的動畫，
        $('div').fadeToggle();
      })
    });
  </script>
</html>

28-自定義動畫animate()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定義動畫animate()</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }

        #div1 {
            top: 50px;
        }

        #div2 {
            top: 170px;
        }
    </style>
</head>
<body>
    <input type="button" value = "從左到右800" id = "lr800"/>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    //自定義動畫
    $(function name(params) {
        $("#lr800").click(function name(params) {
            //讓id為div1的元素動畫移動
            //引數1：prop 必選的 物件 代表的是需要做動畫的屬性
            //引數2：speed 可選的 代表執行動畫的時長
            //引數3：easing 可選的 代表的是緩動還是勻速 linear swing(先慢後快)
            //引數4:動畫執行完畢後的回撥函式
            $('#div1').animate({
                left:800,
                width:200,
                height:300,
                opacity:0.5
            },2000,'linear',function name(params) {
                //既然這裡是一個函式，那就可以寫任意的程式碼，那就可以在這裡繼續給div1做動畫
                $('#div1').animate({
                left:80,
                width:20,
                height:30,
                opacity:1
            },2000,'linear',alert('動畫執行完畢了'))
            });
            
            $('#div2').animate({
                left:800
            },2000,'swing');
        })
    })
</script>

</html>

29-360開關機動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安卓</title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <span id="closeButton"></span>
        <div class="hd" id="headPart">
            <img src="imgs/t.png" alt=""/>
        </div>
        <div class="bd" id="bottomPart">
            <img src="imgs/b.png" alt=""/>
        </div>
    </div>
</body>


<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>     
<script>
  $(function () {
      //1.給關閉按鈕一個點選事件.
      $('#closeButton').click(function () {
          //2.讓下面那部分的高度動畫變為0.
          $('#bottomPart').animate({
              height:0
          },500, function () {
              //3.讓整個大盒子的寬度動畫變為0
              $('#box').animate({
                  width:0
              },1000);
          });
      });

  });
</script>
</html>

30-動畫佇列和stop引數的含義

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>動畫佇列</title>
     <style>
        div {
          width: 100px;
          height: 100px;
          background-color: pink;
          position: absolute;
        }
      </style>
 </head>
 <body>
     <input type="button" value = "開始按鈕" id = "btn">
     <input type="button" value = "停止按鈕" id = "stop">

     <div></div>
 </body>

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>     
<script>
    $(function () {
      $("#btn").click(function () {
        
        //把這些動畫儲存到一個動畫佇列裡面
        $("div").animate({left:800})
          .animate({top:400})
          .animate({width:300,height:300})
          .animate({top:0})
          .animate({left:0})
          .animate({top:50, width:100,height:100})
      })

      //停止動畫：執行stop方法
      //stop();
      //第一個引數：是否清除佇列
      //第二個引數：是否跳轉到最終效果
      //如果不寫引數，預設就是兩個false
      $("#stop").click(function name(params) {
          $('div').stop(true,false);
      })
    });
</script>
 </html>

相關文章