前端與移動開發----jQuery----JQuery動畫,JQ操作元素屬性,JQ操作元素樣式(大量案例)

東三城發表於2020-12-03

JQuery

1. JQuery動畫

1.1 顯示-隱藏動畫

  • show()

    語法: 
    $(物件).show([speed, [easing], [fn]])
    //引數介紹:
    1. show() 方法中的3個引數可以不用設定, 顯示元素沒有動畫效果
    2. 第一個參數列示動畫速度,可以設定 'slow' , 'normal', 'fast' 或者表示動畫的時長毫秒
    3. 第二個參數列示動畫切換效果, 預設 'swing[搖動擺動,由快到慢]' 或者 設定 'linear'
    4. 第三個參數列示動畫完成後執行的函式(回撥函式)
    
    //程式碼演示1,未設定任何引數,控制元素顯示,沒有動畫效果
    var btn = $('input');
    var div = $('div');
    btn.click(function(){
    	div.show();
    })
    
    //程式碼演示2,設定第一個引數,元素按照動畫顯示
    var btn = $('input');
    var div = $('div');
    btn.click(function(){
    	div.show('fast');
    })
    
    //程式碼演示3,設定兩個引數,元素實現切換效果
    btn.click(function(){
    	div.show('normal','swing');
    })
    
    //程式碼4演示,設定第三個引數,動畫執行完後回撥函式
    btn.click(function(){
    	div.show('normal','swing', function(){
    		alert('動畫完成');
    	});
    })
    
  • hide()

    語法:
    $(物件).hide([speed, [easing], [fn]);
    //引數介紹:
    1. 引數可以省略,隱藏元素沒有動畫效果
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    //程式碼演示同上
    
  • toggle()

    語法:
    $(物件).toggle([speed], [easing], [fn])
    //引數介紹
    1. 引數可以省略, 如果元素顯示則切換為隱藏的,如果元素隱藏的則切換為顯示的
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    //程式碼演示同上
    
  • 案例-好友列表案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
         <style>
             .box {
                 width: 300px;
                 border: 1px solid #000;
                 margin: 150px auto;
             }
    
             h4 {
                 margin: 0;
                 height: 55px;
                 line-height: 55px;
                 background-color: skyblue;
                 text-align: center;
                 border-bottom: 1px solid #000;
                 cursor: pointer;
             }
    
             .list1:last-child h4 {
                 border-bottom: 0 none;
             }
    
             .content {
                 display: none;
                 height: 300px;
             }
         </style>
    </head>
    <body>
         <div class="box">
             <div class="list1">
                 <h4>我的好友</h4>
                 <div class="content">
                     朋友列表
                 </div>
             </div>
             <div class="list1">
                 <h4>土豪</h4>
                 <div class="content">
                     蘭博基尼、布加迪、法拉利、勞斯萊斯
                 </div>
             </div>
             <div class="list1">
                 <h4>程式設計師</h4>
                 <div class="content">
                     Tom、Jerry、nll、ll
                 </div>
             </div>
             <div class="list1">
                 <h4>美工</h4>
                 <div class="content">
                     羅絲、朱迪、冰冰
                 </div>
             </div>
         </div>
         <script src="./jQuery.min.js"></script>
         <script>
             $('h4').click(function(){           	                     $(this).siblings().show('fast').parent().siblings().find('.content').hide('fast');
             });
         </script>
    </body>
    </html>
    

1.2 滑動動畫

  • slideDown()

    介紹: slideDown()  顯示元素(通過改變元素高度)
    語法:
    // $(物件).slideDown([speed],[easing],[fn]);
    
    引數介紹:
    1. 引數可以省略
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
    //程式碼演示1:
    $('input').click(function(){
    	$('div').slideDown();
    })
    
    //程式碼演示2
    $('input').click(function(){
    	$('div').slideDown('fast');
    })
    
    //程式碼演示3
    $('input').click(function(){
    	$('div').slideDown('fast', 'linear');
    })
    
    //程式碼演示4
    $('input').click(function(){
    	$('div').slideDown('fast', 'linear', function(){
    		alert('動畫完成')
    	});
    })
    
  • slideUp()

    介紹: 通過高度變化(向上減小)來動態地隱藏所有匹配的元素
    語法:
    // $(物件).slideUp([speed,[easing],[fn]])
    
    引數介紹:
    1. 引數可以省略
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
    //程式碼演示:
    $('input').click(function(){
    	$('div').slideUp('fast', 'linear', function(){
    		console.log('動畫完成')
    	});
    })
    
  • slideToggle()

    語法:
    // $(物件).slideToggle([speed],[easing],[fn])
    
    引數介紹:
    1. 引數可以省略
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
    //程式碼演示:
    $('input').click(function(){
    	$('div').slideToggle('fast', 'linear', function(){
    		 console.log('動畫完成')
    	});
    })
    
  • 小米案例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
                color: #888;
                font-family: '微軟雅黑';
                font-size: 14px;
            }
    
            .nav {
                width: 980px;
                height: 60px;
                margin: 0 auto;
                line-height: 60px;
                position: relative;
            }
    
            .nav li {
                float: left;
            }
    
            .nav li a {
                padding: 0 15px;
                font-size: 20px;
            }
    
            .nav ul {
                overflow: hidden;
            }
    
            .content {
                width: 100%;
                height: 200px;
                left: 0;
                position: absolute;
                display: none;
                border-top: 1px solid #ccc;
                box-shadow: 0 0 5px 2px #ccc;
            }
    
            .content .item {
                width: 100%;
                height: 100%;
                padding-left: 100px;
                padding-top: 60px;
                box-sizing: border-box;
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <ul>
                <li><a href="javascript:;">小米手機</a></li>
                <li><a href="javascript:;">Redmi紅米</a></li>
                <li><a href="javascript:;">電視</a></li>
                <li><a href="javascript:;">筆記本</a></li>
                <li><a href="javascript:;">家電</a></li>
                <li><a href="javascript:;">路由器</a></li>
                <li><a href="javascript:;">智慧硬體</a></li>
                <li><a href="javascript:;">服務</a></li>
                <li><a href="javascript:;">社群</a></li>
            </ul>
    
            <div class="content">
                <div class="item">小米手機</div>
                <div class="item">Redmi紅米</div>
                <div class="item">電視</div>
                <div class="item">筆記本</div>
                <div class="item">家電</div>
                <div class="item">路由器</div>
                <div class="item">智慧硬體</div>
                <div class="item">服務</div>
                <div class="item">社群</div>
            </div>
        </div>
        <script src="./jQuery.min.js"></script>
        <script>
            //1. 滑鼠進入大盒子顯示內容區域,滑鼠離開隱藏內容區域
            $('.nav').hover(function () {
                $('.content').slideDown();
                //2.給每一項設定滑鼠進入事件
                $(this).find('a').hover(function () {
                    $(this).css('color', 'orange').parent().siblings().children().css('color', '#888');
                    //獲取索引
                    var index = $(this).parent().index();
                    //顯示內容區域
                    $('.item').eq(index).show().siblings().hide();
                }, function () {
                    $(this).css('color', '#888');
                })
            }, function () {
                $('.content').slideUp();
            });
    
        </script>
    </body>
    
    </html>
    

1.3 淡入淡出動畫

  • fadeIn()

    介紹: 通過透明度的變化來實現所有匹配元素的淡入效果[顯示]
    語法: 
    // $(物件).fadeIn([speed],[easing],[fn])
    
    引數介紹:
    1. 引數可以不用設定
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
    //程式碼演示1:
    $('input').click(function(){
    	$('div').fadeIn();
    })
    
    //程式碼演示2
    $('input').click(function(){
    	$('div').fadeIn('fast');
    })
    
    //程式碼演示3
    $('input').click(function(){
    	 $('div').fadeIn('fast', 'linear');
    })
    
    //程式碼演示4
    $('input').click(function(){
    	$('div').fadeIn('fast', 'linear', function() {
    	 	alert('動畫完成');
        });
    })
    
  • fadeOut()

    介紹: 通過透明度的變化來實現所有匹配元素的淡出效果[隱藏]
    語法:
    // $(物件).fadeOut([speed],[easing],[fn])
    
    引數介紹:
    1. 引數可以不用設定
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
  • fadeToggle()

    介紹: 通過透明度的變化來開關所有匹配元素的淡入和淡出效果
    語法:
    //  $(物件).fadeToggle([speed,[easing],[fn]])
    
    引數介紹:
    1. 引數可以不用設定
    2. 第一個參數列示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間
    3. 第二個參數列示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. 第三個參數列示回撥函式,動畫完成後執行
    
  • fadeTo()

    介紹:  可以自定義透明度動畫效果
    語法:
    //  $(物件).fadeTo([[speed],opacity,[easing],[fn]])
    
    引數介紹:
    1. speed 表示動畫速度,可以設定 'fast', 'normal', 'slow' 或者自定義毫秒時間  [必須設定]
    2. opacity 表示透明度, 0 - 1 之間必須設定
    3. easing 表示動切換效果, 預設值 'swing' 或者 設定 'linear'
    4. fn 表示回撥函式,動畫完成後執行
    
    //程式碼演示:
    $('input').click(function(){
        $('div').fadeTo(1000, 0.1);
    })
    
  • 高亮顯示案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		html,body {
    			width: 100%;
    			height: 100%;
    			background-color: #000;
    		}
    
    		.box {
    			width: 630px;
    			height: 400px;
    			border: 1px solid #ccc;
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    			display: flex;
    			flex-wrap: wrap;
    			justify-content: space-around;
    			align-content: space-around;
    		}
    
    		.item {
    			width: 200px;
    			height: 186px;
    		}
    	</style>
    </head>
    <body>
        <div class="box">
            <div class="item"><img src="imgs/01.jpg" alt=""></div>
            <div class="item"><img src="imgs/02.jpg" alt=""></div>
            <div class="item"><img src="imgs/03.jpg" alt=""></div>
            <div class="item"><img src="imgs/04.jpg" alt=""></div>
            <div class="item"><img src="imgs/05.jpg" alt=""></div>
            <div class="item"><img src="imgs/06.jpg" alt=""></div>
        </div>
        <script src="./jQuery.min.js"></script>
        <script>
            
             $('.item').hover(function(){
                 $(this).stop().fadeTo('fast', 1).siblings().stop().fadeTo('fast', 0.3);
             }, function(){
                 $('.item').stop().fadeTo('fast', 1);
             });
        </script>
    </body>
    </html>
    
    $('.item').hover(function(){
    	$(this).fadeTo('fast', 1, 'linear').siblings().fadeTo('fast', 0.5, 'linear');
    },function(){
    	$('.item').fadeTo('fast', 1);
    })
    // 問題: 當滑鼠無限次晃動,動畫會一直排隊執行
    
    // 解決: 通過stop()停止動畫排隊,必須寫到動畫前
    $('.item').hover(function(){
    	$(this).stop().fadeTo('fast', 1, 'linear').siblings().stop().fadeTo('fast', 0.5, 'linear');
    },function(){
    	$('.item').stop().fadeTo('fast', 1);
    })
    

1.5自定義動畫

  • animate()

    介紹: 用於建立自定義動畫的函式。
    語法:
    // $(物件).animate(params,[speed],[easing],[fn]);
    
    引數介紹:
    1.params 一組包含作為動畫屬性和終值的樣式屬性和及其值的集合   [必須設定]
    2.speed  三種預定速度之一的字串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如:1000)
    3.easing 預設jQuery提供"linear""swing".
    4.fn:在動畫完成時執行的函式
    
    //程式碼演示1
    $('input').click(function(){
    	$('div').animate({
    		'left': '500px'
    	})
    })
    
    //程式碼演示2
    $('input').click(function(){
    	$('div').animate({
    		'left': '500px'
    	}, 'fast')
    })
    
    //程式碼演示3
    $('input').click(function(){
    	$('div').animate({
    		'left': '500px'
    	}, 'fast', 'linear')
    })
    
    //程式碼演示4
    $('input').click(function(){
    	$('div').animate({
    		'left': '500px'
    	}, 'fast', 'linear', function(){
    		alert('動畫完成')
    	})
    })
    
    //注意: 
    1. animate自定義動畫,無法實現顏色動畫效果,如果需要改變顏色,需要單獨下載外掛實現
    2. 無法直接實現css中轉化效果,如果需要實現,則可以通過新增類名得的方式實現
    3. 單獨的屬性,可以使用駝峰命名法 ('marginLeft' 替代 'margin-left')
    
    https://www.runoob.com/jquery/eff-animate.html
    
  • 案例-手風琴案例

    1. 搭建HTML結構

      <div id="box">
              <ul>
                  <li class="current"><img src="images/1.jpg" /></li>
                  <li class="small"><img src="images/2.jpg" /></li>
                  <li class="small"><img src="images/3.jpg" /></li>
                  <li class="small"><img src="images/4.jpg" /></li>
                  <li class="small"><img src="images/5.jpg" /></li>
              </ul>
          </div>
      
    2. 設定CSS樣式

          <style>
              ul {
                  list-style: none
              }
      
              * {
                  margin: 0;
                  padding: 0;
              }
      
              div {
                  width: 1150px;
                  height: 400px;
                  margin: 50px auto;
                  border: 1px solid red;
                  overflow: hidden;
              }
      
              div li {
                  width: 240px;
                  height: 400px;
                  float: left;
              }
              div ul {
                  width: 1300px;
              }
              #box .current {
                  width: 900px;
              }
              #box .small {
                  width: 90px;
              }
          </style>
      
    3. 設定JS程式碼

      <script src="./jQuery.min.js"></script>
          <script>
              $('li').hover(function(){
                  $(this).stop().animate({
                      'width': '900px'
                  }).siblings().stop().animate({
                      'width': '90px'
                  })
              })
          </script>
      
      • 注意: 在所有動畫前加 stop()方法停止動畫排隊

2.JQ操作元素屬性

1.1 回顧webAPI中操作標籤屬性

  • 操作標籤內建系統屬性

    • getAttribute(屬性名)
    • setAttribute(屬性名, 值)
    • removeAttribute(屬性名)
  • 操作標籤自定義屬性

    • getAttribute(屬性名) setAttribute(屬性名, 值) removeAttribute(屬性名)

    • DOM.dataset

      DOM.dataset  返回的是一個物件
      ☞ 獲取自定義屬性值:   DOM.dataset.屬性名
      ☞ 設定自定義屬性值:   DOM.dataset.自定義屬性名 =;
      

1.2 JQ操作元素屬性

  • 獲取標籤內建系統屬性

    語法:
    $(物件).prop('屬性名');
    
    //程式碼演示:
    var div = $('div');
    var res = div.prop('class');
    console.log(res);
    
  • 設定標籤內建系統屬性

    語法:
    $(物件).prop('屬性名',);
    
    //程式碼演示:
    var div = $('div');
    var res = div.prop('class', 123);
    
    //備註如果設定多個可以通過物件的方式設定,例如:
    $('input').prop({
        'id': 'test',
        'name': 'abc'
    });
    
  • 獲取標籤自定義屬性

    語法:
    $(物件).attr(自定義屬性名);
    
    //程式碼演示:
    var div = $('div');
    var res = div.attr('data-myname');
    
  • 設定標籤自定義屬性

    語法:
    $(物件).attr(自定義屬性名,);
    
    //程式碼演示:
    var div = $('div');
    var res = div.attr('myAge', 18);
    
  • 備註

    $(物件).attr() 既可以操作標籤自定義屬性也可以操作標籤內建屬性
    

####1.3案例-選擇功能

  1. 搭建HTML結構

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                width: 980px;
                margin: 100px auto;
            }
    
            .title {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #ccc;
                font-size: 14px;
                font-family: '微軟雅黑';
            }
    
            .title .bar {
                float: left;
            }
    
            .ckAll {
                margin-left: 20px;
            }
    
            .price {
                margin-left: 400px;
                margin-right: 100px;
            }
    
            .totle {
                margin-left: 100px;
                margin-right: 100px;
            }
    
            .content {
                width: 100%;
                margin: 10px 0;
            }
    
            .item {
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
                margin-bottom: 2px;
                box-sizing: border-box;
                position: relative;
            }
    
            .item .ck {
                position: absolute;
                top: 50%;
                left: 20px;
                transform: translateY(-50%);
            }
    
            .bot {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #ccc;
                font-size: 14px;
                font-family: '微軟雅黑';
            }
    
            .bot .ck {
                margin-left: 20px;
            }
    
            .active {
                background-color: #fff4e8;
            }
        </style>
    </head>
    <body>
         <div class="box">
             <div class="title">
                 <!-- 全選 -->
                 <div class="bar ckAll">
                     <input type="checkbox" class='ckbtn'> 全選
                 </div>
                 <!-- 單價 -->
                 <div class="bar price">單價</div>
    
                 <!-- 數量 -->
                 <div class="bar num">數量</div>
    
                 <!-- 小計 -->
                 <div class="bar totle">小計</div>
    
                 <!-- 操作 -->
                 <div class="bar done">操作</div>
             </div>
             <div class="content">
                 <div class="item">
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                 </div>
                 <div class="item">
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                 </div>
                 <div class="item">
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                 </div>
             </div>
             <div class="bot">
    
             </div>
         </div>
    
         
    </body>
    </html>
    
  2. 實現選擇效果

    <script src="./jQuery.min.js"></script>
         <script>
             
            //功能1: 點選全選按鈕
            (function(){
                $('.ckbtn').click(function(){
                     //獲取當前的狀態
                     var flag = $(this).prop('checked');
                     $('.ck input').prop('checked', flag);
    
                     //點選全選按鈕設定樣式
                     if($(this).prop('checked')) {
                         $('.item').addClass('active');
                     }else {
                         $('.item').removeClass('active');
                     }
                })
            })();
    
            //功能2: 點選每一個核取方塊
            (function(){
                $('.ck input').click(function(){
                //給對應的item設定樣式,如果當前是未被選中的,則需要新增樣式,否則移除樣式
                if($(this).prop('checked')) {
                    $(this).parents('.item').addClass('active');
                }else {
                    $(this).parents('.item').removeClass('active');
                }
                //定義一個變數,用來記錄是否都選中了
                var flag = true;
                //實現全選功能: 如果每一個核取方塊都被選中,那麼全選按鈕就被選中, 否則不選中
                var cks = $('.ck input');
                for(var i = 0; i < cks.length; i++) {
                   if(cks[i].checked == false) {
                        flag = false;
                        break;
                   }
                }
                // 將flag的值賦值給全選按鈕
                $('.ckbtn').prop('checked', flag);
            })
    
            })();
    
         </script>
    

4. JQ操作標籤中的值

1.1 獲取/設定表單控制元件中的值

  • 獲取

    語法:
    $(物件).val()
    
  • 設定

    語法:
    $(物件).val();
    

1.2獲取/設定普通標籤中的值

  • 獲取

    語法:
    $(物件).text();     // 特點與原生js中的innerText一樣
    $(物件).html();	  // 特點與原生js中的innerHTML一樣
    
  • 設定

    語法:
    $(物件).text();   // 特點與原生js中的innerText一樣
    $(物件).html(); 	 // 特點與原生js中的innerHTML一樣
    

1.3 案例-小計功能

  1. 設定HTML結構

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>    
    </head>
    <body>
         <div class="box">
             <div class="title">
                 <!-- 全選 -->
                 <div class="bar ckAll">
                     <input type="checkbox" class='ckbtn'> 全選
                 </div>
                 <!-- 單價 -->
                 <div class="bar price">單價</div>
    
                 <!-- 數量 -->
                 <div class="bar num">數量</div>
    
                 <!-- 小計 -->
                 <div class="bar totle">小計</div>
    
                 <!-- 操作 -->
                 <div class="bar done">操作</div>
             </div>
             <div class="content">
                 <div class="item">
                     <!-- 核取方塊 -->
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                     <!-- 圖片展示 -->
                     <div class="imgShow left">
                         <img src="imgs/hr.jpg" alt="">
                     </div>
    
                     <!-- 文字內容 -->
                     <div class="text left">
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                     </div>
    
                     <!-- 單價 -->
                     <div class="s-price left">
                         &yen; <strong>1299.00</strong>
                     </div>
    
                     <!-- 數量 -->
                     <div class="num1 left">
                         <a href="javascript:;" class="sub">-</a>
                         <input type="text" value="1">
                         <a href="javascript:;" class="add">+</a>
                     </div>
    
                     <!-- 總結 -->
                     <div class="t_price left">
                         &yen;<strong>1299.00</strong>
                     </div>
    
                     <!-- 刪除 -->
                     <div class="del left">
                         <a href="javascript:;">移除購物車</a>
                     </div>
                 </div>
                 <div class="item">
                     <!-- 核取方塊 -->
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                     <!-- 圖片展示 -->
                     <div class="imgShow left">
                         <img src="imgs/hr.jpg" alt="">
                     </div>
    
                     <!-- 文字內容 -->
                     <div class="text left">
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                     </div>
    
                     <!-- 單價 -->
                     <div class="s-price left">
                         &yen;<strong>1299.00</strong>
                     </div>
    
                     <!-- 數量 -->
                     <div class="num1 left">
                         <a href="javascript:;" class="sub">-</a>
                         <input type="text" value="1">
                         <a href="javascript:;" class="add">+</a>
                     </div>
    
                     <!-- 總結 -->
                     <div class="t_price left">
                         &yen;<strong>1299.00</strong>
                     </div>
    
                     <!-- 刪除 -->
                     <div class="del left">
                         <a href="javascript:;">移除購物車</a>
                     </div>
                 </div>
                 <div class="item">
                     <!-- 核取方塊 -->
                     <div class="ck">
                         <input type="checkbox">
                     </div>
                     <!-- 圖片展示 -->
                     <div class="imgShow left">
                         <img src="imgs/hr.jpg" alt="">
                     </div>
    
                     <!-- 文字內容 -->
                     <div class="text left">
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                         <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                     </div>
    
                     <!-- 單價 -->
                     <div class="s-price left">
                         &yen;<strong>1299.00</strong>
                     </div>
    
                     <!-- 數量 -->
                     <div class="num1 left">
                         <a href="javascript:;" class="sub">-</a>
                         <input type="text" value="1">
                         <a href="javascript:;" class="add">+</a>
                     </div>
    
                     <!-- 總結 -->
                     <div class="t_price left">
                         &yen;<strong>1299.00</strong>
                     </div>
    
                     <!-- 刪除 -->
                     <div class="del left">
                         <a href="javascript:;">移除購物車</a>
                     </div>
                 </div>
             </div>
             <div class="bot">
    
             </div>
         </div>   
    </body>
    </html>
    

  2. 設定CSS樣式

    <style type="text/css">
             * {
                 margin: 0;
                 padding: 0;
                 font-family: '微軟雅黑';
             }
    
             .box {
                 width: 980px;
                 margin: 100px auto;
             }
    
             .title {
                 width: 100%;
                 height: 40px;
                 line-height: 40px;
                 background-color: #ccc;
                 font-size: 14px;
                 font-family: '微軟雅黑';
             }
    
             .title .bar {
                 float: left;
             }
    
             .ckAll {
                 margin-left: 20px;
             }
    
             .price {
                 margin-left: 400px;
                 margin-right: 100px;
             }
    
             .totle {
                 margin-left: 100px;
                 margin-right: 100px;
             }
    
             .content {
                 width: 100%;
                 margin: 10px 0;
             }
    
             .item {
                 width: 100%;
                 height: 100px;
                 border: 1px solid #ccc;
                 margin-bottom: 2px;
                 box-sizing: border-box;
                 position: relative;
             }
    
             .item .ck {
                 position: absolute;
                 top: 50%;
                 left: 20px;
                 transform: translateY(-50%);
             }
    
             .bot {
                 width: 100%;
                 height: 40px;
                 line-height: 40px;
                 background-color: #ccc;
                 font-size: 14px;
                 font-family: '微軟雅黑';
             }
    
             .bot .ck {
                 margin-left: 20px;
             }
    
             .active {
                 background-color: #fff4e8;
             }
    
             .left {
                 float: left;
             }
    
             .imgShow {
                 border: 1px solid #ccc;
                 margin-left: 80px;
                 margin-top: 8px;
             }
    
             .text {
                 margin-top: 8px;
                 line-height: 40px;
                 margin-left: 10px;
                 font-size: 14px;
    
             }
    
             .s-price {
                 line-height: 100px;
                 margin-left: 42px;
                 font-size: 14px;
                 color: orange;
             }
    
             .num1 {
                 width: 100px;
                 height: 30px;
                 border: 1px solid #ccc;
                 margin-top: 30px;
                 margin-left: 48px;
             }
    
             .sub {
                 width: 20px;
                 height: 30px;
                 display: block;
                 float: left;
                 line-height: 30px;
                 text-align: center;
                 text-decoration: none;
                 border-right: 1px solid #ccc;
                 box-sizing: border-box;
             }
    
             .num1 input {
                 border: 0 none;
                 outline-style: none;
                 width: 60px;
                 height: 30px;
                 float: left;
                 text-align: center;
             }
    
             .add {
                 width: 20px;
                 height: 30px;
                 display: block;
                 float: left;
                 line-height: 30px;
                 text-align: center;
                 text-decoration: none;
                 border-left: 1px solid #ccc;
                 box-sizing: border-box;
             }
    
             .t_price {
                 line-height: 100px;
                 font-size: 14px;
                 margin-left: 40px;
                 color: red;
             }
    
             .del {
                 line-height: 100px;
                 font-size: 14px;
                 margin-left: 60px;
             }
    
             .del a {
                 text-decoration: none;
                 color: #888;
             }
    
             .del a:hover {
                 color: orange;
             }
         </style>
    
  3. 實現具體功能

    1. 點選加號/減號修改輸入框中的值

      //獲取輸入框中的值: 當前按鈕的兄弟元素
      var num_v = $(this).siblings('input').val();
      // 將當前值增加1
      num_v++;
      //將當前值賦值給輸入框
      $(this).siblings('input').val(num_v);
      
    2. 點選加號/減號計算小計總價

      補充: 價格保留2位小數  toFixed(2)
      例如:  var num = 123;
            num = num.toFixed(2);
      
      //計算總價: 當前商品數量 * 商品單價
      var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();
      //將當前總價設定給總價標籤
      $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));
      
    3. 使用者修改輸入框中的值計算小計總結

      $('.num1 input').change(function(){
        //獲取當前輸入框中的值
        var num_v = $(this).val();
        //計算總價: 當前商品數量 * 商品單價
        var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();	 
        //將當前總價設定給總價標籤
        $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));
      })
      

####1.4案例-商品總數-總價功能

  1. 設定HTML結構

  2. 設定CSS樣式

  3. 實現功能

    1. JQ遍歷物件,獲取物件中的值

      <ul>
        <li>12</li>
        <li>12</li>    
        <li>12</li>    
      </ul>
      如何獲取li標籤中的值? 需要遍歷li    //注意:隱式迭代只能在事件中使用,預設遍歷不能依靠隱式迭代
      
      語法:
      $物件.each(function(index, item){ })
      
      引數介紹:
      1. index 偽陣列中的索引值
      2. item 偽陣列中的每一個DOM物件
      
      注意:
      1. each遍歷後item是一個dom物件不是JQ物件
      
    2. JQ遍歷方式二

      //語法:
      $.each(陣列物件, function(index, item){ })
      
      //引數介紹:
      index  陣列中索引值
      item   陣列中的每一個值
      
    3. 實現總數求和功能

      var num_sum = 0;
      //數量求和: 獲取頁面中的每一個input標籤中的值累加
      $('.num1 input').each(function(index,item){
      	num_sum += parseInt($(item).val());
      })
      //將總和設定給對應的標籤
      $('.product_num strong').text(num_sum);
      
    4. 實現總計求和功能

      var money_sum = 0;
      $('.t_price strong').each(function(i, item){
      	money_sum += Number($(item).text());
      })
      //將總價設定給對應的標籤
      $('.product_money strong').text(money_sum.toFixed(2));
      

5. JQ刪除元素

1.1 刪除元素/元素中內容

  • remove()

    語法:
    $物件.remove();
    // 特點: 從頁面中將當前標籤刪除
    
  • empty()

    語法:
    $物件.empty();
    // 特點: 將標籤中的所有內容清空,當前標籤依然儲存
    
  • html()

    語法:
    $物件.html('');
    //特點: 將標籤中的所有內容清空,當標籤標籤依然保留
    

購物車案例完整程式碼:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: '微軟雅黑';
        }

        .box {
            width: 980px;
            margin: 100px auto;
        }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微軟雅黑';
        }

        .title .bar {
            float: left;
        }

        .ckAll {
            margin-left: 20px;
        }

        .price {
            margin-left: 400px;
            margin-right: 100px;
        }

        .totle {
            margin-left: 100px;
            margin-right: 100px;
        }

        .content {
            width: 100%;
            margin: 10px 0;
        }

        .item {
            width: 100%;
            height: 100px;
            border: 1px solid #ccc;
            margin-bottom: 2px;
            box-sizing: border-box;
            position: relative;
        }

        .item .ck {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
        }

        .bot {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微軟雅黑';
        }

        .bot .ck {
            margin-left: 20px;
        }

        .active {
            background-color: #fff4e8;
        }

        .left {
            float: left;
        }

        .imgShow {
            border: 1px solid #ccc;
            margin-left: 80px;
            margin-top: 8px;
        }

        .text {
            margin-top: 8px;
            line-height: 40px;
            margin-left: 10px;
            font-size: 14px;

        }

        .s-price {
            line-height: 100px;
            margin-left: 42px;
            font-size: 14px;
            color: orange;
        }

        .num1 {
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            margin-top: 30px;
            margin-left: 48px;
        }

        .sub {
            width: 20px;
            height: 30px;
            display: block;
            float: left;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
        }

        .num1 input {
            border: 0 none;
            outline-style: none;
            width: 60px;
            height: 30px;
            float: left;
            text-align: center;
        }

        .add {
            width: 20px;
            height: 30px;
            display: block;
            float: left;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            border-left: 1px solid #ccc;
            box-sizing: border-box;
        }

        .t_price {
            line-height: 100px;
            font-size: 14px;
            margin-left: 40px;
            color: red;
        }

        .del {
            line-height: 100px;
            font-size: 14px;
            margin-left: 60px;
        }

        .del a {
            text-decoration: none;
            color: #888;
        }

        .del a:hover {
            color: orange;
        }

        .del_p {
            margin-left: 100px;
            color: #222;
            font-size: 14px;
            font-family: '微軟雅黑';
            text-decoration: none;
        }

        .clear_p {
            margin-left: 50px;
            color: #222;
            font-size: 14px;
            font-family: '微軟雅黑';
            text-decoration: none;
        }

        .product_num {
            margin-left: 196px;
        }

        .product_num strong {
            color: red;
        }

        .product_money {
            margin-left: 36px;
        }

        .product_money strong {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <!-- 全選 -->
            <div class="bar ckAll">
                <input type="checkbox" class='ckbtn'> 全選
            </div>
            <!-- 單價 -->
            <div class="bar price">單價</div>

            <!-- 數量 -->
            <div class="bar num">數量</div>

            <!-- 小計 -->
            <div class="bar totle">小計</div>

            <!-- 操作 -->
            <div class="bar done">操作</div>
        </div>
        <div class="content">
            <div class="item">
                <!-- 核取方塊 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 圖片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字內容 -->
                <div class="text left">
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                </div>

                <!-- 單價 -->
                <div class="s-price left">
                    &yen; <strong>1299.00</strong>
                </div>

                <!-- 數量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 總結 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 刪除 -->
                <div class="del left">
                    <a href="javascript:;">移除購物車</a>
                </div>
            </div>
            <div class="item">
                <!-- 核取方塊 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 圖片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字內容 -->
                <div class="text left">
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                </div>

                <!-- 單價 -->
                <div class="s-price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 數量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 總結 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 刪除 -->
                <div class="del left">
                    <a href="javascript:;">移除購物車</a>
                </div>
            </div>
            <div class="item">
                <!-- 核取方塊 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 圖片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字內容 -->
                <div class="text left">
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                    <p>榮耀20i 3200萬AI自拍 超廣角三攝 全</p>
                </div>

                <!-- 單價 -->
                <div class="s-price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 數量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 總結 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 刪除 -->
                <div class="del left">
                    <a href="javascript:;">移除購物車</a>
                </div>
            </div>
        </div>
        <div class="bot">

            <!-- 刪除選中商品 -->
            <a href="javascript:;" class="del_p left">刪除選中商品</a>

            <!-- 清空購物車 -->
            <a href="javascript:;" class="clear_p left">清空購物車</a>

            <!-- 商品總數 -->
            <div class="product_num left">
                已購買
                <strong>0</strong>
                件商品
            </div>

            <!-- 商品總價 -->
            <div class="product_money left">
                總價:
                <strong>00.00</strong>
            </div>

        </div>
    </div>
    <script src="./jQuery.min.js"></script>
    <script>
        //全選功能
        (function () {
            $('.ckbtn').click(function () {
                $('.ck input').prop('checked', $(this).prop('checked'));
                if ($(this).prop('checked')) {
                    $('.item').addClass('active');
                } else {
                    $('.item').removeClass('active');
                }
            })
        })();

        //核取方塊點選功能
        (function () {
            $('.ck input').click(function () {
                var flag = true;
                if ($(this).prop('checked')) {
                    $(this).parents('.item').addClass('active');
                } else {
                    $(this).parents('.item').removeClass('active');
                }
                //迴圈遍歷
                var cks = $('.ck input');
                for (var i = 0; i < cks.length; i++) {
                    if (cks[i].checked != true) {
                        flag = false;
                        break;
                    }
                }
                $('.ckbtn').prop('checked', flag);
            });
        })();

        //數量增加減少功能
        (function () {
            //計算總結
            var money = 0;
            // 增加
            $('.add').click(function () {
                //獲取輸入框中的值
                var num = Number($(this).siblings('input').val());
                num++;
                //將累加後的值賦值給輸入框(賦值給當前按鈕對應的輸入框)
                $(this).siblings('input').val(num);

                //計算價格
                money = num * $(this).parent().siblings('.s-price').find('strong').text();
                //將價格賦值給總價標籤
                $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

                //計算總結
                getMoney();
            });

            //減少
            $('.sub').click(function () {
                //獲取輸入框中的值
                var num = Number($(this).siblings('input').val());
                if (num <= 0) {
                    return;
                }
                num--;
                $(this).siblings('input').val(num);

                //計算價格
                money = num * $(this).parent().siblings('.s-price').find('strong').text();
                //將價格賦值給總價標籤
                $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

                //計算總價
                getMoney();
            })
        })();
        //計算總價和數量
        function getMoney() {
            var money = 0;
            var lis = $('.t_price strong');
            $.each(lis, function (index, item) {
                money += Number($(item).text());
            })
            //將總結設定給總結標籤
            $('.product_money strong').text(money.toFixed(2));

            var cont = 0;
            var items = $('.num1  input');
            items.each(function (inex, item) {
                cont += Number($(item).val());
            });

            //將總數設定給標籤
            $('.product_num strong').text(cont);
        }
        getMoney();

        //清空購物車功能
        $('.clear_p').click(function () {
            if (confirm('確定清空麼?')) {
                $('.content').empty();

                getMoney();
            }
        });

        //移除購物車功能
        $('.del a').click(function () {
            if (confirm('確定刪除麼?')) {
                $(this).parents('.item').remove();
                getMoney();
            }
        })

        //刪除選中的商品
        $('.del_p').click(function () {

            //1. 先獲取選中的商品
            var lis = $('.ck input:checked');
            //2. 遍歷當前選中元素的父元素item
            $.each(lis, function (index, item) {
                $(item).parents('.item').remove();
            })
            getMoney();
        })

    </script>
</body>

</html>

如有不足,請多指教,
未完待續,持續更新!
大家一起進步!

相關文章