js下 Day05、DOM案例

一．简易购物车

效果图:

功能思路分析:

功能一:数量加减

1. 找到所有的加号按钮，循环绑定点击事件。点击加号时让对应的数量+1 （找清楚加号和数量的关系，让数量标签的内容++）

2. 找到所有的减号按钮，循环绑定点击事件。点击减号时让对应的数量-1 （找清楚减号和数量的关系，让数量标签的内容--）。

3. 点击减号时，商品数量不能小于0，需要做一个判断，小于0就让数量等于0。

功能二：统计总数

4. 点击加号和减号时还需要计算总数量和总价格：总数量即找到所有数量累加在一起；总价即将每一个商品的单价和数量相乘的结果累加在一起；最后放到页面指定盒子中。

#二．爱情转移

效果图:

功能思路分析:

功能一: 标签转移

1. 找到左右转移按钮和左右内容盒子。

2. 点击右按钮时，找到左盒子所有被选中的元素( querySelectorAll( ** ‘input:checked’) )，全都添加到右盒子中( appendChild() )，并且取消选中状态( item.checked = false )**。

3. 点击左按钮时，找到右盒子所有被选中的元素( querySelectorAll( ** ‘input:checked’) )，全都添加到左盒子中( appendChild() )，并且取消选中状态( item.checked = false )**。

#三．今日小结

document.createElement() 创建节点

元素.appendChild(子节点) 末尾添加节点

parentNode 父节点

previousElementChild 上一个元素兄弟

nextElementChild 下一个元素兄弟

元素.checked 复选框选中状态

元素.removeChild(子节点) 删除节点

#四．作业

#1.完成爱情转移案例中全选反选功能

功能思路分析:

1. 找到左全选按钮，点击左全选按钮时，左盒子中所有的复选框的状态跟全选按钮的状态保持一致( item.checked = btn.checked );

2. 找到右全选按钮，点击右全选按钮时，右盒子中所有的复选框的状态跟全选按钮的状态保持一致( item.checked = btn.checked );

#2.简易留言板

效果图:

功能思路分析:

简单排版没有功能点击地方可以忽略

功能一:发布留言

① 创建一个标签( **document.createElement( ** ‘li’) )

② 设置标签的内容，内容为文本框的输入的值( 文本框.value )、当前时间、删除按钮

③ 添加( appendChild() )到下面的ul大盒子里

功能二:删除留言

④ 找到删除按钮，给删除按钮绑定点击事件,点击删除按钮时

将整条留言删除。即从ul中删除上面创建的标签( removeChild() )