购物车练习总结
初学练习，收货颇多。两个方便，一部分是技术知识上的，一部分是开发思路上的。
整个练习的业务逻辑包括：
1.动态的通过按钮添加商品，商品名价格等随机产生
2.实现全选按钮点击事件（反选取消全选）
3.实现复选框点击事件
4.实现数量加减按钮点击事件
5.实现文本框数量改变事件
6.实现删除操作
商品内容包括如下：
在开始写的时候并没有做任何分析，仅仅是用一种车到山前必有路的方式一点一点的解决，想到什么写什么，完全没有联系各个事件可能存在的关系。
比如说实现文本框内容的改变，也是因为首次写，虽然查过change事件，但是还是用了不是最好的focus和blur事件来处理，在处理时知道会引起总计的改变，但是可能没有考虑到如果在选中的情况下总价也会改变，而事后想起才再添加功能，
在说数量加减点击事件，没有思考和文本框的联系，就是用完全正常的思路，点击后会引起文本框数值的改变，合计改变，可能改变的总价，实际上这里完全可以在点击事件
中改变文本框的值后，在模拟文本框的change事件，可以大大简化代码，并且更加合理。
虽然最后写完了，虽然练习了jquerr的dom操作的选择器，但是最后的代码冗杂，不够简洁。
然后在完成的结果上加上老师的思路对其在从头分析。
首先分析各个事件的业务逻辑：
1.按钮点击添加商品事件，点击后需要判断全选按钮是否是全选，如果全选，全选按钮取消选中。
2.全选按钮点击事件，点击后所有的商品复选框和全选框保持一致的选中状态。同时这里全选状态的改变会引起总价的改变。
3.复选框的点击事件会引起总价的改变，同时可能引起全选框状态的改变。
4.数量加减会引起文本框值的变化和总计的变化，同时可能引起总价的变化。同时需要注意这里文本框值的限制必须大于0.
5.文本框数量的变化会引起总计的变化，可能会引起总价的变化，同时考虑其值的限制必须大于0.
6.删除操作直接的就是删除该商品行，同时需要考虑可能引起总价的变化，和全选框的变化。
代码实现逻辑：
从上面的业务逻辑中可知很多操作都和总价有关，因此实现一个计算总价的函数。总价函数根据商品选中与否和商品总计来计算。
1.按钮点击添加商品。考虑实现动态添加商品，即给按钮添加点击事件。这里需要考虑新增的商品html元素的事件问题。有三种方法：
一、用给定的model ul来clone(true),首先给modle ul加好事件，每次clone（），给定true参数也会clone到绑定的事件。
二、处理事件利用事件代理来解决。给添加的这个商品元素的父元素增加对添加元素的事件代理。只需要先给其父元素绑定代理事件，然后添加元素节点即可。
三、每次增加商品ul节点时，给这个节点绑定每个事件。
选用一种方法来实现动态增加商品节点。这里采用第一种方法，克隆model ul对象后，产生随机商品替换价格等。同时要考虑到全选框的状态。
2.文本框值的改变。
开始思路：在实现这个问题的时候因为不熟悉表单操作，费了很大劲（因为这里不知道prop()和attr(“value”)的区别的使用方法
，也因此对prop()和attr()的使用比较熟悉了）。首先考虑的是获取到改变前的值，可以用focus函数获得，然后就是在blur事件中获得改变后的值，然后便是
实现改变合计，如果当前商品被选中的话改变总价。在这里就完了。写的代码因选择器使用不熟写的也很冗长。其实后面没有考虑到其实用不着
改变前的值，并且还需要对改变后的值做判断，如果为0为负数怎么处理。
老师思路：使用change函数，获得改变后的值后，对值判断后进行对应的处理，合法值改变合计，不合法值0表示删除，负数重新设置值为1，改变合计。
最后改变总价，利用计算总价函数
3.加减数量按钮
开始思路：
点击后，先将文本框内容加1，在改变合计，如果商品选中改变总价。代码冗长。（回想起来，代码中存在很多总价和总计的计算）
老师思路：改变文本框的值，然后出发文本框的change事件（change事件中包括了合计总价的处理）。
4.复选框
开始思路：判断状态，实现反选，改变总价（又重复计算总价代码）.同时判断是否改变全选框的状态。
老师思路：不用判断，直接计算总价，调用计算总价函数，判断是否改变全选框状态，
5.全选按钮
开始思路：判断全选框状态，根据不同状态分别重设商品复选框状态，改变总价。
老师思路：获取全选框的状态，用each实现将每一个商品的状态设置同全选框一样的状态，调用总价计算函数，
6.删除操作
开始思路：删除当前商品，计算总价。
老师思路：删除当前商品，计算总价。
代码思想上的收获：1.重复代码提取出来。2.写代码前先思考清楚。3.思考不同事件间可能的联系。
技术知识上的收获：1.事件委托。2.关于val()和attr() 3.关于prop()函数和attr()函数 4.关于索引的index()函数 5.each()遍历
1。关于val()函数和attr(“value”)问题
在给text文本框添加事件使用val()发现不能改变元素value属性值，而用attr()不能让文本框内容改变，因此关于value的操作可能要同时用两个。前者用来改变文本框的值，后者用来设置属性
val()方法
val（）主要是用来处理表单元素的值的，如input、select等
只能使用在表单元素上
二者区别
val（）函数可以获得动态的text文本框的值，而attr("value")只能获得html元素中设置的value属性值，而这个值除非用attr("value",somevlaue)重新设置，它的值时不变的。
2.关于复选框的checked属性和prop()函数和attr()
使用时发现prop()无法设置checked的值，而attr()可以。使用prop()函数获得的返回值是true或者false；而attr("checked")返回的是“checked”或者undifined
prop（）方法
关于什么时候使用prop()方法
如果添加属性名称该属性就会生效应该使用prop()
如果只存在true和false两个属性值应该使用prop()，如checked，disabled等
返回值为true和false
二者区别
prop()获得的是节点DOM对象的属性值，这个值是随着复选框的选中或者不选而改变。而attr()获得是html元素设置的checked值，不会随页面中对复选框的操作而改变值，只能用attr("checked")来重新设置。当html元素没有设置checked属性时，前者返回false，后者返回undefined。当选中时前者返回的是true，后者返回的是false、
3.获取元素在选取的元素集合中的下标
使用index()方法
注意有参和无参时的结果
可以传递的参数包括选择器或者DOM对象或者jquery对象或者传递一组jquery对象或者不传参数
实例
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
4.each()方法
用来遍历选择器选择的结果集合
可以使用return false;提前退出循环
自己代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, ul, li {
margin: 0;
padding: 0
}
li {
float: left;
width: 100px;
height: 24px;
line-height: 24px;
list-style: none;
border: solid 1px;
text-align: center;
}
#cart {
width: 700px;
text-align: center;
}
.num input {
width: 30px;
text-align: center;
}
ul{
background-color: cornflowerblue;
}
/*ul:nth-child(0) {*/
/*background-color: aqua;*/
/*}*/
.num {
width: 150px;
}
#total {
clear: both;
text-align: right;
padding-right: 50px;
padding-top: 5px;
}
#total span {
color: red
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
//除了这种先将所有事件绑定在一个模板Ul上，然后利用clone()的方法，还可以用
//事件委托（利用事件冒泡原理实现）实现。
var pro = ["电脑","u盘","充电器","鼠标"];
var price = [10000,23,45,65];
$(
最低0.47元/天 解锁文章
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
