一.简易购物车

效果图:

功能思路分析:

功能一:数量加减

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

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

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

功能二:统计总数

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

#二.爱情转移

效果图:

img

功能思路分析:

功能一: 标签转移

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

js下 Day05、DOM案例的更多相关文章

  1. JS 下拉菜单案例

    css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...

  2. js下 Day12、案例

    一.垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 ​  2. 鼠标移动 ( ...

  3. js下 Day11、案例

    一.成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. ...

  4. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  5. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  6. js 字符串转dom 和dom 转字符串

    js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...

  7. NPM酷库:jsdom,纯JS实现的DOM

    NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢 ...

  8. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  9. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

随机推荐

  1. 凭借着这份面经,我拿下了字节,美团的offer!

    最近经常有粉丝私信问我问了一些诸如秋招该怎么复习的问题,我就想顺便把回答整理发一发.我也是把之前面试的一些经历经验和身边的人面试的经验总结了一下放在下面. 前期准备规划: 如果秋招的话一般过年回来就可 ...

  2. Codeforces741D

    dsu on tree 题目链接 点我跳转 题目大意 一棵根为 \(1\) 的树,每条边上有一个字符(\(a-v\)共\(22\)种) 一条简单路径被称为Dokhtar-kosh当且仅当路径上的字符经 ...

  3. ABBYY FineReader 14扫描和保存文档

    在ABBYY FineReader 14中您可以使用扫描"新建任务"窗口选项卡上的内置任务创建各种格式的数字文档.本文介绍使用FineReader 14扫描和保存文档的方法. 1. ...

  4. FL Studio中的Fruity slicer采样器功能介绍

    本章节采用图文结合的方式来给大家介绍电音编曲软件FL Studio中的Fruity Slicer采样器的功能,感兴趣的朋友可一起来交流哦. Fruity slicer(水果切片器)插件是FL Stud ...

  5. CDR魔镜插件是什么,有哪些功能?

    CDR魔镜插件是一款功能强大的CorelDRAW插件,很多CDR用户很早直接就有接触,因其强大的功能性和快速运行的特点被广大用户所喜爱,没有繁琐的选项,无论新人小白,还是制图高手都能够很快的适应,实现 ...

  6. 如何使Camtasia的抠像效果更真实自然

    相信大家都知道录像编辑软件Camtasia的"移除颜色"可以抠像换背景,详细操作可以看小编的另一篇教程 <如何用Camtasia为微课换上一个好看的背景>.接下来,小编 ...

  7. windows安装redis扩展

    Thread Safety enabled 打开phpinfo() 看php版本是ts还是nts,  如上是ts版本的,所以需要安装redis的ts版本, redis的扩展下载地址 https://p ...

  8. 10万级etl批量作业自动化调度工具Taskctl之轻量级Web应用版

    什么是批量作业: 批量处理是银行业整个信息后台最为重要的技术形态,也是银行核心信息资产数据的分享.传输.演化的重要技术手段.有调查指出,全球70%的数据是经过批量处理得以再次使用,可见批量处理在整个信 ...

  9. 浅谈代理模式与java中的动态代理

    代理模式的定义: 代理模式是一个使用律非常高的模式,定义如下: 为其他对象提供一种代理,以控制对这个对象的访问. 类图: 简单的静态代理: public interface IRunner{ //这是 ...

  10. web自动化-绕过登录

    两个方法: 1.常用的方法: 第一种方法是登录后查看网站的 cookie,请求 url 的时候把 cookie 带上(缺点是:cookie有时间限制.优点:简单,方便) 2.添加cookies的方式: ...