前端與移動開發----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

案例-手風琴案例

搭建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>

設定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>

設定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案例-選擇功能

搭建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>

實現選擇效果

<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 案例-小計功能

設定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>

設定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>

實現具體功能

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

//獲取輸入框中的值: 當前按鈕的兄弟元素
var num_v = $(this).siblings('input').val();
// 將當前值增加1
num_v++;
//將當前值賦值給輸入框
$(this).siblings('input').val(num_v);

點選加號/減號計算小計總價

補充: 價格保留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));

使用者修改輸入框中的值計算小計總結

$('.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案例-商品總數-總價功能

設定HTML結構
設定CSS樣式

實現功能

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物件

JQ遍歷方式二

//語法:
$.each(陣列物件, function(index, item){ })

//引數介紹:
index  陣列中索引值
item   陣列中的每一個值

實現總數求和功能

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

實現總計求和功能

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>

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

JQ操作標籤--樣式操作、位置操作、尺寸、文字操作、獲取值操作、屬性操作、文件處理、事件
2024-06-27
事件
Zepto這樣操作元素屬性
2019-02-28
jQuery知識總結之元素屬性與樣式的操作
2019-03-21
jQuery
JQ操作類與JS操作類的區別
2020-12-24
JS
前端與移動開發----webAPI----文字框事件，滑鼠事件，標籤屬性操作方式
2020-11-24
前端移動開發WebAPI事件
JS/JQ動態建立（新增）optgroup和option屬性
2022-04-09
JS
動態生成HTML元素併為元素追加屬性
2018-04-25
HTML
jq獲取上級、同級、下級元素
2018-08-08
js動態建立元素，並控制元素樣式
2018-08-23
JS
前端開發，塊元素與行內元素
2024-06-03
前端
jq怎麼寫css樣式
2021-09-11
CSS
基於jq的bootstrap 常用樣式demo 引入css jq js檔案後樣式出現
2019-03-05
bootCSSJS
jQuery 元素操作——遍歷元素
2020-11-29
jQuery
JavaScript經典案例：鍵盤控制元素移動
2020-11-25
JavaScript
jq如何改變css樣式寬度
2021-09-11
CSS
屬性動畫與差值器
2018-03-16
動畫
html元素,屬性修改
2018-08-24
HTML
屬性動畫
2018-07-03
動畫
v-bind 動態更新 HTML 元素上的屬性
2019-08-20
HTML
Android自動化-如何獲取檢視元素屬性？
2024-06-12
Android
jq
2024-09-05
Android 動畫之屬性動畫
2019-05-07
Android動畫
kubernetes叢集管理之通過jq來擷取屬性
2019-06-19
android屬性動畫
2020-11-04
Android動畫
JavaScript元素上下彈性運動
2018-05-24
JavaScript
Flutter共享元素動畫，你會嗎？
2019-04-06
Flutter動畫
dom元素操作獲取等
2020-12-10
JavaScript與CSS3動畫方式改變元素尺寸
2018-03-14
JavaScriptCSSS3動畫
動態建立節點並且給建立的元素新增屬性
2018-06-26
【Android 動畫】動畫詳解之屬性動畫（三）
2019-02-25
Android動畫
【Android 動畫】動畫詳解之屬性動畫（五）
2019-02-26
Android動畫
jQuery屬性操作之.val()函式
2018-12-02
jQuery函式
Appium常用操作之「元素定位、swipe 滑屏操作」
2020-10-30
APP
Android 動畫詳解：屬性動畫、View 動畫和幀動畫
2019-03-04
Android動畫View
HTML——② HTML 元素、屬性詳解
2019-04-10
HTML
行內元素屬性設定
2019-03-14
【前端】HTML__內聯元素與塊元素
2019-02-16
前端HTML
SVG 動畫 fill 屬性
2018-10-25
SVG動畫