jquery 購物車

本身複習一下jquery，同時寫了一個爛大街的素材 購物車 給你們分享下。

jquery

jQuery對象是一個類數組的對象，含有連續的整形屬性以及一系列的jQuery方法。它把全部的操做都包裝在一個jQuery()函數中，造成了統一(也是唯一)的操做入口。
其中咱們用的很是頻繁的一個函數是$()或者說是jQuery()，當咱們調用他的時候會根據傳入的參數的不一樣而達到不一樣的效果。

1.$()或者是jQuery()

1.1

jQuery(selector,context):
接收一個css選擇器表達式(selector)和可選的選擇器上下文(context),返回一個包含了匹配的DOM元素的jQuery對象。
默認狀況下，對匹配元素的查找都是從根元素ducument對象開始，也就是說查找範圍是整棵文檔樹。可是若是給定了上下文context，則在指定上下文中查找.

 1   ps.
 2         <span>body span</span>
 3         <span>body span</span>
 4         <span>body span</span>
 5         <div class="wrap">
 6             <span>wrap span</span>
 7             <span>wrap span</span>
 8             <span>wrap span</span>
 9         </div>
10 
11         $('span').css('background-color','red');//全部的span都會變紅
12         $('span','.wrap').css('background-color','red');//只有.wrap中的span會變紅

 

1.2

jQuery(html,ownerDocument) 、jQuery(html,props):
用所提供的html建立dom元素。
html參數是要建立的標籤，能夠是單標籤也能夠是多標籤。
第二個參數用於建立新DOM元素的文檔對象，若是不傳入則默認爲當前的文檔對象。

1 //單標籤  兩種方式均可以往body中插入div
2        
3         $('<div>').appendTo('body');
4         $('<div></div>').appendTo('body');  
5          
6         // 多標籤嵌套
7         $('<div><span>dfsg</span></div>').appendTo('body')

 

appendTo() 方法在被選元素的結尾（仍然在內部）插入指定內容。
一樣也有其餘方法在被選元素的頭部，以及頭部外部，尾部外部添加元素。

1.3

jQuery(element or elementsArray)：
若是傳入一個DOM元素或者是DOM元素的數組，則把DOM元素封裝到jQuery對象中並返回。

 1 <ul>
 2             <li>1</li>
 3             <li>2</li>
 4             <li>3</li>
 5             <li>4</li>
 6             <li>5</li>
 7         </ul>
 8 
 9          // 傳入DOM元素
10          $('li').each(function(index,ele){
11                 $(ele).on('click',function(){
12                     $(this).css('background','red');//這裏的DOM元素就是this
13                 })
14         })
15         
16         //傳入DOM數組
17         var aLi=document.getElementsByTagName('li');
18             aLi=[].slice.call(aLi);//集合轉數組
19             var $aLi=$(aLi);
20             $aLi.html('我是jQuery對象');//全部的li的內容都變成'我是jQuery對象'

 

1.4

jQuery(object)：
若是傳入的是一個object對象，則把該對象封裝到jQuery對象中並返回。

1 var obj={name:'謙龍'};
2         var $obj=$(obj);//封裝成jQuery對象
3         //綁定自定義事件
4         $obj.on('say',function(){
5             console.log(this.name)//輸出謙龍
6         });
7         $obj.trigger('say')

 

1.5

jQuery(callback)：
當傳進去的參數是函數的時候，則在document對象上綁定一個ready事件監聽函數，當DOM結構加載完成的時候執行。

1  $(function(){
2     
3         })
4         //以上代碼和下面的效果是同樣的
5         $(document).ready(function(){
6             ...//代碼
7         })

 

1.6

jQuery(jQuery object)：
當傳進去的參數是一個jQuery對象的時候，則建立該jQuery對象的一個副本並返回。副本與傳入的jQuery對象引用徹底相同的元素。

1 var aLi=$('li');
2         var copyLi=$(aLi);//建立一個aLi的副本
3         console.log(aLi);
4         console.log(copyLi);
5         console.log(copyLi===aLi);

 

1.7

jQuery()：
若是不傳入任何的參數，則返回一個空的jQuery對象，屬性length爲0。
注意這個功能能夠用來複用jQuery對象，例如能夠建立一個空的jQuery對象，而後在須要的時候先手動修改其中的元素，而後在調用jQuery方法。從而避免重複建立jQuery對象。

2. :gt()

:gt 選擇器選取 index 值高於指定數的元素。
ps.
$(‘tr:gt(0)’)：選取下表爲0 以後全部的tr元素。
擴展：
:lt 選擇器來選取 index 值小於指定數的元素。

3. each()

each() 方法規定爲每一個匹配元素規定運行的函數。
通俗來說就是循環便利，至關因而for,foreach.

 1 $('tr:gt(0)').each(function () {
 2          console.log(this);
 3          這裏的this指向的是循環遍歷的每個tr 下的 td;
 4             ps.
 5                 輸出結果：
 6                         <td width="150px">31</td>
 7                         <td width="150px">iphhone</td>
 8                         <td width="300px">
 9                             <button>-</button>
10                             <input type="text" value="0">
11                             <button>+</button>
12                         </td>
13                         <td width="150px">$4000</td>
14                         <td width="150px">0</td>
15                         <td width="150px"><a class="a">移除</a></td>
16          能夠說是指向當前調用者;
17      })

 

4. find()

find() 方法返回被選元素的後代元素。

$(this).find('td:eq(2)')

4.1

eq():
:eq() 選擇器選取帶有指定 index 值的元素。
在 第3部 $(this) 拿到每個tr下面的全部td以後
.find(‘td:eq(2)’) 去查找第三個td

5. children()

children() 方法返回返回被選元素的全部直接子元素，也就是說第一代子級

5.1

children()和find()的區別
children()：只返回兒子一級的子元素
find()：返回全部後代

6. first() last()

first():返回第一個匹配到的元素
last():返回最後一個匹配到的元素

7. 拿到加減號給加減號添加點擊事件
7.1

$(this).find(‘td:eq(2)’).children().first()
拿到tr下的第三個td找到裏邊的子元素獲取到第一個元素 減號 添加點擊事件

<td width="300px">
            <button>-</button>
            <input type="text" value="0">
            <button>+</button>
        </td>

 

7.2

$(this).find(‘td:eq(2)’).children().last()
拿到tr下的第三個td找到裏邊的子元素獲取到最後一個元素 加號 添加點擊事件

 <td width="300px">
            <button>-</button>
            <input type="text" value="0">
            <button>+</button>
        </td>

 

8. next() prev()

8.1

next()： 方法返回被選元素的後一個同級元素
prev()： 得到匹配元素集合中每一個元素緊鄰的前一個同胞元素，經過選擇器進行篩選是可選的。

8.2

$(this).next().val(); $(this).next().prev();
在加號減號分別拿到input裏商品數量，進行商品數量操做。

9. val() text()
9.1

val()
方法返回或設置被選元素的值。
元素的值是經過 value 屬性設置的。該方法大多用於 input 元素。

9.2

text()
方法設置或返回被選元素的文本內容。
當該方法用於返回內容時，則返回全部匹配元素的文本內容（會刪除 HTML 標記）。
當該方法用於設置內容時，則重寫全部匹配元素的內容。

9.3

html()：補充
方法設置或返回被選元素的內容（innerHTML）。
當該方法用於返回內容時，則返回第一個匹配元素的內容。
當該方法用於設置內容時，則重寫全部匹配元素的內容。

9.4

text() html() 區別：
一個是操做文本內容，一個是操做元素內容。

10. 加減事件
10.1
加號事件
10.1.1

經過$(this).prev().val();拿到加號上一個元素，也就是input商品數量的值，進行 加1
而後商品數量加了以後，
要給input從新賦值，
要從新計算商品的總價以及購物車的總金額

1 jia.click(function () {
2                 var num = $(this).prev().val();
3                 num++;
4                 $(this).prev().val(num);//給input從新賦值
5                 total($(this));//調用購物車總金額函數
6                 allmoney();//調用購買商品總價函數
7             })

 

10.2
減號事件
10.2.1

經過$(this).next().val();拿到加號下一個元素，也就是input商品數量的值，進行 加1
而後商品數量加了以後，
要給input從新賦值，
要從新計算商品的總價以及購物車的總金額

 1   jian.click(function () {
 2                 var num = $(this).next().val();
 3                 num--;
 4                 if (num < 0) {
 5                     num = 0;
 6                     if (confirm("已是0件了你肯定要刪除這件商品嗎") == true) {
 7                         $(this).parent().parent().remove();
 8                     }
 9                 }
10                 $(this).next().val(num);
11                 total($(this));
12                 allmoney();
13             })

 

10.2.2

confirm()
方法用於顯示一個帶有指定消息和確認及取消按鈕的對話框。
若是訪問者點擊"肯定"，此方法返回true，不然返回false。

11. parent()

方法返回被選元素的直接父元素。該方法只沿着 DOM 樹向上遍歷單一層級。

11.1

parents():方法返回被選元素的全部祖先元素。
祖先是父、祖父、曾祖父，依此類推。
該方法從父元素向上遍歷 DOM 元素的祖先，直至文檔根元素的全部路徑（）。
注意：
若是 filter 參數爲空，該方法將從直接父元素直至 和 的全部路徑中選取元素集合中的全部祖先。所以傳遞一個縮小搜索結果範圍的選擇器表達式是很是有用的。

11.2

closest(): 方法返回被選元素的第一個祖先元素。
祖先是父、祖父、曾祖父，依此類推。
該方法從當前元素向上遍歷，直至文檔根元素的全部路徑（），來查找 DOM 元素的第一個祖先元素。

11.2.1

parents() 與 closest() 的不一樣
parents()
從父元素開始
沿 DOM 樹向上遍歷，並返回匹配所傳遞的表達式的全部祖先
返回包含零個、一個或多個元素的 jQuery 對象
closest()
從當前元素開始
沿 DOM 樹向上遍歷，並返回匹配所傳遞的表達式的第一個祖先
返回包含零個或一個元素的 jQuery 對象

11.3

parentsUntil()：方法返回介於 selector 與 stop 之間的全部祖先元素。
該方法從父元素向上遍歷 DOM 元素的祖先，直至文檔根元素的全部路徑，直到到達指定的元素爲止。
注意：
若是兩個參數都爲空，該方法將返回全部祖先元素（與 parents() 方法相同）。

.parentsUntil(stop,filter)

12. substr()

方法可在字符串中抽取從 start 下標開始的指定數目的字符。

返回值:

一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符） 處開始的 length
個字符。若是沒有指定 length，那麼返回的字符串包含從 start 到 stringObject 的結尾的字符。

13. remove()

方法移除被選元素，包括全部的文本和子節點。
該方法也會移除被選元素的數據和事件。

13.1

detach()
方法移除被選元素，包括全部的文本和子節點。而後它會保留數據和事件。
該方法會保留移除元素的副本，容許它們在之後被從新插入。

13.2

empty()
方法移除被選元素的全部子節點和內容。
該方法不會移除元素自己，或它的屬性。

14. :not()

方法返回不符合必定條件的元素。
該方法讓您規定一個條件。不符合條件的元素將從選擇中返回，符合條件的元素將被移除。
該方法一般用於從被選元素組合中移除一個或多個元素。

14.1

filter()
方法返回符合必定條件的元素。
該方法讓您規定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。
該方法一般用於縮小在被選元素組合中搜索元素的範圍。
tr:not(:first):not(:last):
返回除了第一個和最後一個的tr元素集合。

15. 計算單個商品總價 計算總購買價

15.1
單個商品總價

 1  //商品單個總價
 2     function total(o) {
 3         // 參數o 加減調用時所傳的當前的元素集合
 4         var n = o.parent().children().first().next().val();
 5         // n 表明的是找到o，也就是說找到加號或者是減號的  parent父級元素 的 children兒子元素 的 first第一個元素的 next下一個元素 的 val值
 6         // 也就是說拿到input框裏的商品數量
 7         var money = Number(o.parent().next().text().substr(1));
 8         // money 表明的是 o 父級的下一個元素的text文本 而後經過substr拿到商品單個價格  也就是￥2000
 9         o.parent().next().next().text(n * money);
10         //最後找到 展現總價的td，計算出總價以後賦值。
11     }

 

15.2
計算全部商品的總價

 1  //總購買價 
 2         function allmoney() {
 3             var num = 0;
 4             $('tr:not(:first):not(:last)').each(function () {
 5                 // tr:not(:first):not(:last) 這裏的意思就是除了第一個tr 和 最後一個tr 去循環
 6                 //由於這裏的第一個tr和最後一個tr是表頭和表尾
 7                 num += Number($(this).find('td:eq(4)').text());
 8                 //最後就是把全部的tr裏面第五個td的文本 也就是單個商品的總價 相加計算出 全部總價
 9             })
10             $('tr:last').children().first().next().text(num);
11             // 最後找到最後一個tr裏的兒子元素的第二個元素 設置文本內容  也就是總價。
12         }

 

16. 刪除商品

16.1

拿到當前要刪除商品的總價
$(this).parent().prev().text();

16.2

拿到購物車總價
$(‘tr:last’).children().first().next().text();

16.3

最後用購物車總價減去單個商品的總價，從新給購物車總價賦值
$(‘tr:last’).children().first().next().text(b-a);
而後刪除整條元素
$(this).parent().parent().remove();

17. 清除購物車

17.1

刪除全部商品
$(‘tr:not(:first):not(:last)’).remove();
這裏是除了第一個tr和最後一個tr，其他的tr元素所有刪除，
操做dom，來改變購物車展現的內容。

17.2

清空總價數據爲0
$(‘tr:last’).children().first().next().text(‘0’);

總結：

1.jquery 實際操做dom
2.涉及原生方法
3.購物車邏輯
3.1 添加商品，增長商品數量，增長單個商品總價，同時增長總金額
3.2 減小商品，減小商品數量，減小單個商品總價，同時減小總金額
當商品數量小於0時移除商品
3.3 刪除商品，減小商品總價
3.4 清空購物車，總金額變爲0
4.this指向
方法中的全部this均指向當前調用者
5.最後總結一會兒，基礎其實很重要。

大最後給你們附上源碼：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title></title>
  7 </head>
  8 <style type="text/css">
  9     td {
 10         text-align: center;
 11         height: 50px;
 12         border-bottom: 1px solid gray;
 13     }
 14 
 15     a {
 16         padding: 5px 10px;
 17         background: red;
 18         color: #fff;
 19         font-weight: bold;
 20         border-radius: 5px;
 21         text-align: center;
 22     }
 23 
 24     tr:last-child td {
 25         border: none;
 26     }
 27 </style>
 28 
 29 <body>
 30     <table cellspacing="0" cellpadding="0">
 31         <tr>
 32             <td width="150px">產品編號</td>
 33             <td width="150px">產品名字</td>
 34             <td width="300px">產品數量</td>
 35             <td width="150px">單價</td>
 36             <td width="150px">總價</td>
 37 
 38         </tr>
 39         <tr>
 40             <td width="150px">31</td>
 41             <td width="150px">iphhone</td>
 42             <td width="300px">
 43                 <button>-</button>
 44                 <input type="text" value="0">
 45                 <button>+</button>
 46             </td>
 47             <td width="150px">$4000</td>
 48             <td width="150px">0</td>
 49             <td width="150px"><a class="a">移除</a></td>
 50         </tr>
 51         <tr>
 52             <td width="150px">52</td>
 53             <td width="150px">NOKIA</td>
 54             <td width="300px">
 55                 <button>-</button>
 56                 <input type="text" value="0">
 57                 <button>+</button>
 58             </td>
 59             <td width="150px">$2000</td>
 60             <td width="150px">0</td>
 61             <td width="150px"><a class="a">移除</a></td>
 62         </tr>
 63         <tr>
 64             <td width="150px">77</td>
 65             <td width="150px">Samng</td>
 66             <td width="300px">
 67                 <button>-</button>
 68                 <input type="text" value="0">
 69                 <button>+</button>
 70             </td>
 71             <td width="150px">$1000</td>
 72             <td width="150px">0</td>
 73             <td width="150px"><a class="a">移除</a></td>
 74         </tr>
 75         <tr>
 76             <td width="150px">23</td>
 77             <td width="150px">qq</td>
 78             <td width="300px">
 79                 <button>-</button>
 80                 <input type="text" value="0">
 81                 <button>+</button>
 82             </td>
 83             <td width="150px">$3000</td>
 84             <td width="150px">0</td>
 85             <td width="0px"><a class="a">移除</a></td>
 86         </tr>
 87         <tr>
 88             <td width="150px">總購買價</td>
 89             <td width="150px">0</td>
 90             <td width="300px"></td>
 91             <td width="150px"></td>
 92             <td width="0px"><a id="qingchu">清空購物車</a></td>
 93             <td width="150px"></td>
 94         </tr>
 95     </table>
 96 </body>
 97 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 98 <script type="text/javascript">
 99     $('tr:gt(0)').each(function () {
100         var jian = $(this).find('td:eq(2)').children().first()
101         var jia = $(this).find('td:eq(2)').children().last()
102         //            減點擊事件
103         jian.click(function () {
104             var num = $(this).next().val();
105             num--;
106             if (num < 0) {
107                 num = 0;
108                 if (confirm("已是0件了你肯定要刪除這件商品嗎") == true) {
109                     $(this).parent().parent().remove();
110                 }
111             }
112             $(this).next().val(num);
113             total($(this));
114             allmoney();
115         })
116         //加點擊事件
117         jia.click(function () {
118             var num = $(this).prev().val();
119             num++;
120             $(this).prev().val(num);
121             total($(this));
122             allmoney();
123         })
124     })
125     //商品單個總價
126     function total(o) {
127         var n = o.parent().children().first().next().val();
128         var money = Number(o.parent().next().text().substr(1));
129         o.parent().next().next().text(n * money);
130     }
131     //總購買價 
132     function allmoney() {
133         var num = 0;
134         $('tr:not(:first):not(:last)').each(function () {
135             num += Number($(this).find('td:eq(4)').text());
136         })
137         $('tr:last').children().first().next().text(num);
138     }
139     //刪除
140     $('.a').click(function () {
141         let a=$(this).parent().prev().text();//當前商品的總價
142         let b=$('tr:last').children().first().next().text();//購物車的總價
143         $('tr:last').children().first().next().text(b-a);
144         $(this).parent().parent().remove();
145     })
146     //清除購物車
147     $('#qingchu').click(function () {
148         $('tr:not(:first):not(:last)').remove();
149         $('tr:last').children().first().next().text('0');
150     })
151 </script>
152 
153 </html>