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() )