前端與移動開發----jQuery----JQuery動畫,JQ操作元素屬性,JQ操作元素樣式(大量案例)
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"> ¥ <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"> ¥<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"> ¥<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"> ¥<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"> ¥<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"> ¥<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">
¥ <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">
¥<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">
¥<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">
¥<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">
¥<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">
¥<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操作標籤--樣式操作、 位置操作、尺寸、 文字操作、 獲取值操作、 屬性操作、文件處理、事件事件
- Zepto這樣操作元素屬性
- jQuery知識總結之元素屬性與樣式的操作jQuery
- jq選擇子元素
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS
- JQ操作類與JS操作類的區別JS
- jq動態生成的元素(標籤)新增點選事件事件
- 前端與移動開發----webAPI----文字框事件,滑鼠事件,標籤屬性操作方式前端移動開發WebAPI事件
- JS/JQ動態建立(新增)optgroup和option屬性JS
- javascript操作html元素屬性簡單介紹JavaScriptHTML
- jq獲取上級、同級、下級元素
- jq怎麼寫css樣式CSS
- 《HTML5移動開發》——2.2 HTML元素/屬性的語法HTML移動開發
- 前端開發,塊元素與行內元素前端
- 基於jq的bootstrap 常用樣式demo 引入css jq js檔案後樣式出現bootCSSJS
- jq如何改變css樣式寬度CSS
- 動態生成HTML元素併為元素追加屬性HTML
- jQuery 元素操作——遍歷元素jQuery
- javascript基礎(樣式的操作,瀏覽器相容樣式操作,其他的樣式相關屬性,滾動的樣式)(三十)JavaScript瀏覽器
- 使用jquery操作元素的css樣式(獲取、修改等等)jQueryCSS
- css3中的zoom屬性以及jquery中css()方法操作元素的屬性CSSS3OOMjQuery
- js dom元素樣式設定相關style屬性介紹JS
- jq
- jq封裝函式封裝函式
- js動態建立元素,並控制元素樣式JS
- script元素屬性
- js與jq比較JS
- javascript通用獲取元素樣式屬性值程式碼例項JavaScript
- 自己平常開發常用的jq方法
- jQuery 操作html元素jQueryHTML
- html元素,屬性修改HTML
- js獲取元素的方法與屬性JS
- 動態修改input元素type屬性值
- jquery方法操作iframe元素jQuery
- 通過js一次性為元素設定多個樣式屬性JS
- JavaScript經典案例:鍵盤控制元素移動JavaScript
- javascript之屬性操作、innerHTML、判斷、自增、操作多個樣式的方法和不相容的屬性JavaScriptHTML
- 使用cssText為元素一次設定多個樣式屬性值CSS