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>