大廠都在看的購物車

jquery

jQuery對象是一個類數(shù)組的對象险绘，含有連續(xù)的整形屬性以及一系列的jQuery方法。它把所有的操作都包裝在一個jQuery()函數(shù)中色建，形成了統(tǒng)一(也是惟一)的操作入口哺呜。

其中我們用的非常頻繁的一個函數(shù)是$()或者說是jQuery()，當(dāng)我們調(diào)用他的時候會根據(jù)傳入的參數(shù)的不同而達到不同的效果箕戳。

1.$()或者是jQuery()

? ? 1.1

? ? ? ? jQuery(selector,context):

? ? ? ? 接收一個css選擇器表達式(selector)和可選的選擇器上下文(context),返回一個包含了匹配的DOM元素的jQuery對象某残。

? ? ? ? 默認(rèn)情況下，對匹配元素的查找都是從根元素ducument對象開始陵吸，也就是說查找范圍是整棵文檔樹玻墅。但是如果給定了上下文context，則在指定上下文中查找.

? ? ? ? ps.

? ? ? ? <span>body span</span>

? ? ? ? <div class="wrap">

? ? ? ? ? ? <span>wrap span</span>

? ? ? ? </div>

? ? ? ? $('span').css('background-color','red');//所有的span都會變紅

? ? ? ? $('span','.wrap').css('background-color','red');//只有.wrap中的span會變紅

? ? 1.2

? ? ? ? jQuery(html,ownerDocument) 壮虫、jQuery(html,props):

? ? ? ? 用所提供的html創(chuàng)建dom元素澳厢。

? ? ? ? html參數(shù)是要創(chuàng)建的標(biāo)簽环础，可以是單標(biāo)簽也可以是多標(biāo)簽。

? ? ? ? 第二個參數(shù)用于創(chuàng)建新DOM元素的文檔對象剩拢，如果不傳入則默認(rèn)為當(dāng)前的文檔對象线得。

? ? ? ? //單標(biāo)簽? 兩種方式都可以往body中插入div

? ? ? ? $('<div>').appendTo('body');

? ? ? ? $('<div></div>').appendTo('body');?

? ? ? ? // 多標(biāo)簽嵌套

? ? ? ? $('<div><span>dfsg</span></div>').appendTo('body')

? ? ? ? appendTo() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。

? ? ? ? 同樣也有其他方法在被選元素的頭部徐伐，以及頭部外部贯钩，尾部外部添加元素。

? ? 1.3

? ? ? ? jQuery(element or elementsArray)：

? ? ? ? 如果傳入一個DOM元素或者是DOM元素的數(shù)組办素，則把DOM元素封裝到j(luò)Query對象中并返回角雷。

? ? ? ? <ul>

? ? ? ? ? ? <li>1</li>

? ? ? ? ? ? <li>2</li>

? ? ? ? ? ? <li>3</li>

? ? ? ? ? ? <li>4</li>

? ? ? ? ? ? <li>5</li>

? ? ? ? </ul>

? ? ? ? // 傳入DOM元素

? ? ? ? $('li').each(function(index,ele){

? ? ? ? ? ? ? ? $(ele).on('click',function(){

? ? ? ? ? ? ? ? ? ? $(this).css('background','red');//這里的DOM元素就是this

? ? ? ? ? ? ? ? })

? ? ? ? })

? ? ? ? //傳入DOM數(shù)組

? ? ? ? var aLi=document.getElementsByTagName('li');

? ? ? ? ? ? aLi=[].slice.call(aLi);//集合轉(zhuǎn)數(shù)組

? ? ? ? ? ? var $aLi=$(aLi);

? ? ? ? ? ? $aLi.html('我是jQuery對象');//所有的li的內(nèi)容都變成'我是jQuery對象'

? ? 1.4

? ? ? ? jQuery(object)：

? ? ? ? 如果傳入的是一個object對象，則把該對象封裝到j(luò)Query對象中并返回性穿。

? ? ? ? var obj={name:'謙龍'};

? ? ? ? var $obj=$(obj);//封裝成jQuery對象

? ? ? ? //綁定自定義事件

? ? ? ? $obj.on('say',function(){

? ? ? ? ? ? console.log(this.name)//輸出謙龍

? ? ? ? });

? ? ? ? $obj.trigger('say')

? ? 1.5

? ? ? ? jQuery(callback)：

? ? ? ? 當(dāng)傳進去的參數(shù)是函數(shù)的時候勺三，則在document對象上綁定一個ready事件監(jiān)聽函數(shù)，當(dāng)DOM結(jié)構(gòu)加載完成的時候執(zhí)行需曾。

? ? ? ? $(function(){

? ? ? ? })

? ? ? ? //以上代碼和下面的效果是一樣的

? ? ? ? $(document).ready(function(){

? ? ? ? ? ? ...//代碼

? ? ? ? })

? ? 1.6

? ? ? ? jQuery(jQuery object)：

? ? ? ? 當(dāng)傳進去的參數(shù)是一個jQuery對象的時候檩咱，則創(chuàng)建該jQuery對象的一個副本并返回。副本與傳入的jQuery對象引用完全相同的元素胯舷。

? ? ? ? var aLi=$('li');

? ? ? ? var copyLi=$(aLi);//創(chuàng)建一個aLi的副本

? ? ? ? console.log(aLi);

? ? ? ? console.log(copyLi);

? ? ? ? console.log(copyLi===aLi);

? ? 1.7

? ? ? ? jQuery()：

? ? ? ? 如果不傳入任何的參數(shù)刻蚯，則返回一個空的jQuery對象，屬性length為0桑嘶。

? ? ? ? 注意這個功能可以用來復(fù)用jQuery對象炊汹，例如可以創(chuàng)建一個空的jQuery對象，然后在需要的時候先手動修改其中的元素逃顶，然后在調(diào)用jQuery方法讨便。從而避免重復(fù)創(chuàng)建jQuery對象。

2. :gt()

? ? :gt 選擇器選取 index 值高于指定數(shù)的元素以政。

? ? ps.

? ? ? ? $('tr:gt(0)')：選取下表為0 之后所有的tr元素霸褒。

? ? 擴展：

? ? ? ? :lt 選擇器來選取 index 值小于指定數(shù)的元素。

3. each()

? ? each() 方法規(guī)定為每個匹配元素規(guī)定運行的函數(shù)盈蛮。

? ? 通俗來講就是循環(huán)便利废菱，相當(dāng)于是for,foreach.

? ? $('tr:gt(0)').each(function () {

? ? ? ? console.log(this);

? ? ? ? 這里的this指向的是循環(huán)遍歷的每一個tr 下的 td;

? ? ? ? ? ? ps.

? ? ? ? ? ? ? ? 輸出結(jié)果：

? ? ? ? ? ? ? ? ? ? ? ? <td width="150px">31</td>

? ? ? ? ? ? <td width="150px">iphhone</td>

? ? ? ? ? ? <td width="300px">

? ? ? ? ? ? <button>-</button>

? ? ? ? ? ? <input type="text" value="0">

? ? ? ? ? ? <button>+</button>

? ? ? ? ? ? </td>

? ? ? ? ? ? <td width="150px">$4000</td>

? ? ? ? ? ? <td width="150px">0</td>

? ? ? ? ? ? <td width="150px"><a class="a">移除</a></td>

? ? ? ? 可以說是指向當(dāng)前調(diào)用者;

? ? })

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()的區(qū)別

? ? ? ? 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里商品數(shù)量旁理，進行商品數(shù)量操作。

9. val()? text()

? ? 9.1

? ? ? ? val()

? ? ? ? ? ? 方法返回或設(shè)置被選元素的值我磁。

? ? ? ? ? ? 元素的值是通過 value 屬性設(shè)置的孽文。該方法大多用于 input 元素驻襟。

? ? 9.2

? ? ? ? text()

? ? ? ? ? ? 方法設(shè)置或返回被選元素的文本內(nèi)容。

? ? ? ? ? ? 當(dāng)該方法用于返回內(nèi)容時芋哭，則返回所有匹配元素的文本內(nèi)容（會刪除 HTML 標(biāo)記）沉衣。

? ? ? ? ? ? 當(dāng)該方法用于設(shè)置內(nèi)容時，則重寫所有匹配元素的內(nèi)容楷掉。

? ? 9.3

? ? ? ? html()：補充

? ? ? ? ? ? 方法設(shè)置或返回被選元素的內(nèi)容（innerHTML）厢蒜。

? ? ? ? ? ? 當(dāng)該方法用于返回內(nèi)容時霞势，則返回第一個匹配元素的內(nèi)容烹植。

? ? ? ? ? ? 當(dāng)該方法用于設(shè)置內(nèi)容時，則重寫所有匹配元素的內(nèi)容愕贡。

? ? 9.4

? ? ? ? text() html() 區(qū)別：

? ? ? ? 一個是操作文本內(nèi)容草雕，一個是操作元素內(nèi)容。

10. 加減事件

? ? 10.1

? ? ? ? 加號事件

? ? ? ? ? ? 10.1.1

? ? ? ? ? ? ? ? 通過$(this).prev().val();拿到加號上一個元素固以，也就是input商品數(shù)量的值墩虹，進行加1

? ? ? ? ? ? ? ? 然后商品數(shù)量加了之后，

? ? ? ? ? ? ? ? 要給input重新賦值憨琳，

? ? ? ? ? ? ? ? 要重新計算商品的總價以及購物車的總金額

? ? ? ? ? ? ? ? jia.click(function () {

? ? ? ? var num = $(this).prev().val();

? ? ? ? num++;

? ? ? ? $(this).prev().val(num);//給input重新賦值

? ? ? ? total($(this));//調(diào)用購物車總金額函數(shù)

? ? ? ? allmoney();//調(diào)用購買商品總價函數(shù)

? ? ? ? })

? ? 10.2

? ? ? ? 減號事件

? ? ? ? ? ? 10.2.1

? ? ? ? ? ? ? ? 通過$(this).next().val();拿到加號下一個元素诫钓，也就是input商品數(shù)量的值，進行加1

? ? ? ? ? ? ? ? 然后商品數(shù)量加了之后篙螟，

? ? ? ? ? ? ? ? 要給input重新賦值菌湃，

? ? ? ? ? ? ? ? 要重新計算商品的總價以及購物車的總金額

? ? ? ? ? ? ? ? jian.click(function () {

? ? ? ? var num = $(this).next().val();

? ? ? ? num--;

? ? ? ? if (num < 0) {

? ? ? ? num = 0;

? ? ? ? if (confirm("已經(jīng)是0件了你確定要刪除這件商品嗎") == true) {

? ? ? ? $(this).parent().parent().remove();

? ? ? ? }

? ? ? ? $(this).next().val(num);

? ? ? ? total($(this));

? ? ? ? allmoney();

? ? ? ? })

? ? ? ? ? ? 10.2.2

? ? ? ? ? ? ? ? confirm()

? ? ? ? ? ? ? ? ? ? 方法用于顯示一個帶有指定消息和確認(rèn)及取消按鈕的對話框。

? ? ? ? ? ? ? ? ? ? 如果訪問者點擊"確定"遍略，此方法返回true惧所，否則返回false。

11. parent()

? ? ? ? 方法返回被選元素的直接父元素绪杏。該方法只沿著 DOM 樹向上遍歷單一層級下愈。

? ? ? ? 11.1

? ? ? ? ? ? parents():方法返回被選元素的所有祖先元素。

? ? ? ? ? ? 祖先是父蕾久、祖父势似、曾祖父，依此類推僧著。

? ? ? ? ? ? 該方法從父元素向上遍歷 DOM 元素的祖先叫编，直至文檔根元素的所有路徑（<html>）。

? ? ? ? 注意：

? ? ? ? ? ? 如果 filter 參數(shù)為空霹抛，該方法將從直接父元素直至 <body> 和 <html> 的所有路徑中選取元素集合中的所有祖先搓逾。因此傳遞一個縮小搜索結(jié)果范圍的選擇器表達式是非常有用的掸掏。

? ? ? ? 11.2

? ? ? ? ? ? closest(): 方法返回被選元素的第一個祖先元素掠拳。

? ? ? ? ? ? 祖先是父、祖父萧锉、曾祖父，依此類推朗兵。

? ? ? ? ? ? 該方法從當(dāng)前元素向上遍歷污淋，直至文檔根元素的所有路徑（<html>），來查找 DOM 元素的第一個祖先元素余掖。

? ? ? ? 11.2.1

? ? ? ? ? ? parents() 與 closest() 的不同

? ? ? ? ? ? parents()

? ? ? ? ? ? ? ? 從父元素開始

? ? ? ? ? ? ? ? 沿 DOM 樹向上遍歷寸爆，并返回匹配所傳遞的表達式的所有祖先

? ? ? ? ? ? ? ? 返回包含零個、一個或多個元素的 jQuery 對象

? ? ? ? ? ? closest()

? ? ? ? ? ? ? ? 從當(dāng)前元素開始

? ? ? ? ? ? ? ? 沿 DOM 樹向上遍歷盐欺，并返回匹配所傳遞的表達式的第一個祖先

? ? ? ? ? ? ? ? 返回包含零個或一個元素的 jQuery 對象

? ? ? ? 11.3

? ? ? ? ? ? parentsUntil()：方法返回介于 selector 與 stop 之間的所有祖先元素赁豆。

? ? ? ? ? ? 該方法從父元素向上遍歷 DOM 元素的祖先，直至文檔根元素的所有路徑冗美，直到到達指定的元素為止魔种。

? ? ? ? ? ? 注意：

? ? ? ? ? ? 如果兩個參數(shù)都為空，該方法將返回所有祖先元素（與 parents() 方法相同）粉洼。

? ? ? ? ? ? .parentsUntil(stop,filter)

12. substr()

? ? ? ? 方法可在字符串中抽取從 start 下標(biāo)開始的指定數(shù)目的字符节预。

? ? ? ? 返回值:

? ? ? ? 一個新的字符串，包含從 stringObject 的 start（包括 start 所指的字符）處開始的 length 個字符属韧。如果沒有指定 length安拟，那么返回的字符串包含從 start 到 stringObject 的結(jié)尾的字符。

13. remove()

? ? ? ? 方法移除被選元素宵喂，包括所有的文本和子節(jié)點糠赦。

? ? ? ? 該方法也會移除被選元素的數(shù)據(jù)和事件。

? ? ? ? 13.1

? ? ? ? ? ? detach()

? ? ? ? ? ? ? ? 方法移除被選元素樊破，包括所有的文本和子節(jié)點愉棱。然后它會保留數(shù)據(jù)和事件。

? ? ? ? ? ? ? ? 該方法會保留移除元素的副本哲戚，允許它們在以后被重新插入奔滑。

? ? ? ? 13.2

? ? ? ? ? ? empty()

? ? ? ? ? ? ? ? 方法移除被選元素的所有子節(jié)點和內(nèi)容。

? ? ? ? ? ? ? ? 該方法不會移除元素本身顺少，或它的屬性朋其。

14. :not()

? ? ? ? 方法返回不符合一定條件的元素。

? ? ? ? 該方法讓您規(guī)定一個條件脆炎。不符合條件的元素將從選擇中返回梅猿，符合條件的元素將被移除。

? ? ? ? 該方法通常用于從被選元素組合中移除一個或多個元素秒裕。

? ? ? ? 14.1

? ? ? ? ? ? filter()

? ? ? ? ? ? ? ? 方法返回符合一定條件的元素袱蚓。

? ? ? ? ? ? ? ? 該方法讓您規(guī)定一個條件。不符合條件的元素將從選擇中移除几蜻，符合條件的元素將被返回喇潘。

? ? ? ? ? ? ? ? 該方法通常用于縮小在被選元素組合中搜索元素的范圍体斩。

? ? tr:not(:first):not(:last):

? ? 返回除了第一個和最后一個的tr元素集合。

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

? ? 15.1

? ? ? ? 單個商品總價

? ? ? ? //商品單個總價

? ? function total(o) {

? ? ? ? ? ? // 參數(shù)o 加減調(diào)用時所傳的當(dāng)前的元素集合

? ? var n = o.parent().children().first().next().val();

? ? ? ? ? ? // n 代表的是找到o颖低，也就是說找到加號或者是減號的? parent父級元素的 children兒子元素的 first第一個元素的 next下一個元素的 val值

? ? ? ? ? ? // 也就是說拿到input框里的商品數(shù)量

? ? var money = Number(o.parent().next().text().substr(1));

? ? ? ? ? ? // money 代表的是 o 父級的下一個元素的text文本然后通過substr拿到商品單個價格? 也就是￥2000

? ? o.parent().next().next().text(n * money);

? ? ? ? ? ? //最后找到展示總價的td絮吵，計算出總價之后賦值。

? ? }

? ? 15.2

? ? ? ? 計算所有商品的總價

? ? ? ? //總購買價

? ? ? ? function allmoney() {

? ? ? ? var num = 0;

? ? ? ? $('tr:not(:first):not(:last)').each(function () {

? ? ? ? ? ? ? ? ? ? // tr:not(:first):not(:last) 這里的意思就是除了第一個tr 和最后一個tr 去循環(huán)

? ? ? ? ? ? ? ? ? ? //因為這里的第一個tr和最后一個tr是表頭和表尾

? ? ? ? num += Number($(this).find('td:eq(4)').text());

? ? ? ? ? ? ? ? ? ? //最后就是把所有的tr里面第五個td的文本也就是單個商品的總價相加計算出所有總價

? ? ? ? })

? ? ? ? $('tr:last').children().first().next().text(num);

? ? ? ? ? ? ? ? // 最后找到最后一個tr里的兒子元素的第二個元素設(shè)置文本內(nèi)容? 也就是總價忱屑。

? ? ? ? }

16. 刪除商品

? ? 16.1

? ? ? ? 拿到當(dāng)前要刪除商品的總價

? ? ? ? $(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伴嗡，來改變購物車展示的內(nèi)容。

? ? 17.2

? ? ? ? 清空總價數(shù)據(jù)為0

? ? ? ? $('tr:last').children().first().next().text('0');

總結(jié)：

? ? 1.jquery 實際操作dom

? ? 2.涉及原生方法

? ? 3.購物車邏輯

? ? ? ? 3.1 添加商品脏毯，增加商品數(shù)量闹究，增加單個商品總價幔崖，同時增加總金額

? ? ? ? 3.2 減少商品食店，減少商品數(shù)量，減少單個商品總價赏寇，同時減少總金額

? ? ? ? ? ? 當(dāng)商品數(shù)量小于0時移除商品

? ? ? ? 3.3 刪除商品吉嫩，減少商品總價

? ? ? ? 3.4 清空購物車，總金額變?yōu)?

? ? 4.this指向

? ? ? ? 方法中的所有this均指向當(dāng)前調(diào)用者

? ? 5.最后總結(jié)一下子嗅定，基礎(chǔ)其實很重要自娩。

附上源碼：

<!DOCTYPE?html>

<html>

<head>

????<meta?charset="UTF-8">

????<title></title>

</head>

????td?{

????????text-align:?center;

????????height:?50px;

????????border-bottom:?1px?solid?gray;

????}

????a?{

????????padding:?5px?10px;

????????background:?red;

????????color:?#fff;

????????font-weight:?bold;

????????border-radius:?5px;

????????text-align:?center;

????}

????tr:last-child?td?{

????????border:?none;

????}

</style>

<body>

????<table?cellspacing="0"?cellpadding="0">

????????<tr>

????????????<td?width="150px">產(chǎn)品編號</td>

????????????<td?width="150px">產(chǎn)品名字</td>

????????????<td?width="300px">產(chǎn)品數(shù)量</td>

????????????<td?width="150px">單價</td>

????????????<td?width="150px">總價</td>

????????</tr>

????????<tr>

????????????<td?width="150px">31</td>

????????????<td?width="150px">iphhone</td>

????????????<td?width="300px">

????????????????<button>-</button>

????????????????<input?type="text"?value="0">

????????????????<button>+</button>

????????????</td>

????????????<td?width="150px">$4000</td>

????????????<td?width="150px">0</td>

????????????<td?width="150px"><a?class="a">移除</a></td>

????????</tr>

????????<tr>

????????????<td?width="150px">52</td>

????????????<td?width="150px">NOKIA</td>

????????????<td?width="300px">

????????????????<button>-</button>

????????????????<input?type="text"?value="0">

????????????????<button>+</button>

????????????</td>

????????????<td?width="150px">$2000</td>

????????????<td?width="150px">0</td>

????????????<td?width="150px"><a?class="a">移除</a></td>

????????</tr>

????????<tr>

????????????<td?width="150px">77</td>

????????????<td?width="150px">Samng</td>

????????????<td?width="300px">

????????????????<button>-</button>

????????????????<input?type="text"?value="0">

????????????????<button>+</button>

????????????</td>

????????????<td?width="150px">$1000</td>

????????????<td?width="150px">0</td>

????????????<td?width="150px"><a?class="a">移除</a></td>

????????</tr>

????????<tr>

????????????<td?width="150px">23</td>

????????????<td?width="150px">qq</td>

????????????<td?width="300px">

????????????????<button>-</button>

????????????????<input?type="text"?value="0">

????????????????<button>+</button>

????????????</td>

????????????<td?width="150px">$3000</td>

????????????<td?width="150px">0</td>

????????????<td?width="0px"><a?class="a">移除</a></td>

????????</tr>

????????<tr>

????????????<td?width="150px">總購買價</td>

????????????<td?width="150px">0</td>

????????????<td?width="300px"></td>

????????????<td?width="150px"></td>

????????????<td?width="0px"><a?id="qingchu">清空購物車</a></td>

????????????<td?width="150px"></td>

????????</tr>

????</table>

</body>

????$('tr:gt(0)').each(function?()?{

????????var?jian?=?$(this).find('td:eq(2)').children().first()

????????var?jia?=?$(this).find('td:eq(2)').children().last()

????????//??????????減點擊事件

????????jian.click(function?()?{

????????????var?num?=?$(this).next().val();

????????????num--;

????????????if?(num?<?0)?{

????????????????num?=?0;

????????????????if?(confirm("已經(jīng)是0件了你確定要刪除這件商品嗎")?==?true)?{

????????????????????$(this).parent().parent().remove();

????????????????}

????????????}

????????????$(this).next().val(num);

????????????total($(this));

????????????allmoney();

????????})

????????//加點擊事件

????????jia.click(function?()?{

????????????var?num?=?$(this).prev().val();

????????????num++;

????????????$(this).prev().val(num);

????????????total($(this));

????????????allmoney();

????????})

????})

????//商品單個總價

????function?total(o)?{

????????var?n?=?o.parent().children().first().next().val();

????????var?money?=?Number(o.parent().next().text().substr(1));

????????o.parent().next().next().text(n?*?money);

????}

????//總購買價?

????function?allmoney()?{

????????var?num?=?0;

????????$('tr:not(:first):not(:last)').each(function?()?{

????????????num?+=?Number($(this).find('td:eq(4)').text());

????????})

????????$('tr:last').children().first().next().text(num);

????}

????//刪除

????$('.a').click(function?()?{

????????let?a=$(this).parent().prev().text();//當(dāng)前商品的總價

????????let?b=$('tr:last').children().first().next().text();//購物車的總價

????????$('tr:last').children().first().next().text(b-a);

????????$(this).parent().parent().remove();

????})

????//清除購物車

????$('#qingchu').click(function?()?{

????????$('tr:not(:first):not(:last)').remove();

????????$('tr:last').children().first().next().text('0');

????})

</script>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市渠退，隨后出現(xiàn)的幾起案子忙迁，更是在濱河造成了極大的恐慌，老刑警劉巖碎乃，帶你破解...
沈念sama閱讀 218,284評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件姊扔，死亡現(xiàn)場離奇詭異，居然都是意外死亡梅誓，警方通過查閱死者的電腦和手機恰梢，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,115評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來梗掰，“玉大人嵌言，你說我怎么就攤上這事〖八耄” “怎么了摧茴？”我有些...
開封第一講書人閱讀 164,614評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長埂陆。經(jīng)常有香客問我苛白，道長尘分，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,671評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任丸氛，我火速辦了婚禮培愁，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘缓窜。我一直安慰自己定续，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,699評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布禾锤。她就那樣靜靜地躺著私股，像睡著了一般。火紅的嫁衣襯著肌膚如雪恩掷。梳的紋絲不亂的頭發(fā)上倡鲸，一...
開封第一講書人閱讀 51,562評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音黄娘，去河邊找鬼峭状。笑死，一個胖子當(dāng)著我的面吹牛逼争，可吹牛的內(nèi)容都是我干的优床。我是一名探鬼主播，決...
沈念sama閱讀 40,309評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼誓焦，長吁一口氣：“原來是場噩夢啊……” “哼胆敞！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起杂伟，我...
開封第一講書人閱讀 39,223評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤移层，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后赫粥，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體观话，經(jīng)...
沈念sama閱讀 45,668評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,859評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年傅是，在試婚紗的時候發(fā)現(xiàn)自己被綠了匪燕。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,981評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡喧笔，死狀恐怖帽驯，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情书闸，我是刑警寧澤尼变，帶...
沈念sama閱讀 35,705評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響嫌术，放射性物質(zhì)發(fā)生泄漏哀澈。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,310評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一度气、第九天我趴在偏房一處隱蔽的房頂上張望割按。院中可真熱鬧，春花似錦磷籍、人聲如沸适荣。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,904評論 0贊 22
一樁弒父案院领，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽弛矛。三九已至，卻和暖如春比然，著一層夾襖步出監(jiān)牢的瞬間丈氓，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,023評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工强法，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留万俗，地道東北人。一個月前我還...
沈念sama閱讀 48,146評論 3贊 370
代替公主和親
正文我出身青樓拟烫，卻偏偏與公主長得像该编，于是被迫代替她去往敵國和親迄本。傳聞我的和親對象是個殘疾皇子硕淑，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,933評論 2贊 355

大廠都在看的購物車

推薦閱讀更多精彩內(nèi)容