自己复习一下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>