一.简易购物车

效果图:

功能思路分析:

功能一:数量加减

\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. 根节点到叶子节点路径之和为target

    //递归吧,但是在递归到底的条件上要判断好,比如说完整路径是到叶子节点,也就是说左右子节点都为空,并且这时候的root.val==target表示找到了一个list,再返回. 但是因为我并没有直接就用 ...

  2. Mockito 结合 Springboot 进行应用测试

    Spring Boot可以和大部分流行的测试框架协同工作:通过Spring JUnit创建单元测试:生成测试数据初始化数据库用于测试:Spring Boot可以跟BDD(Behavier Driven ...

  3. 使用Eclipse创建Maven的JSP项目

    使用Eclipse创建Maven的JSP项目 MyEclipse2015根本不行,试过各种解决方案都无济于事. 创建Maven项目 此时项目上有错,pom.xml有错. 修改Java版本 生成web. ...

  4. 再论<? extends T>和<? super T>

    参考: https://www.cnblogs.com/drizzlewithwind/p/6100164.html Java 泛型 <? super T> 中 super 怎么 理解?与 ...

  5. Maven 依赖树的解析规则

    对于 Java 开发工程师来说,Maven 是依赖管理和代码构建的标准.遵循「约定大于配置」理念.Maven 是 Java 开发工程师日常使用的工具,本篇文章简要介绍一下 Maven 的依赖树解析. ...

  6. 学习Java的第一步,配置电脑环境

    JAVA安装与配置 俗话说的好,工欲善其事,必先利其器,想要学习Java,那么我们首先需要一个能够进行学习的环境. 一.安装JDK 为什么要安装jdk,jdk是什么? ​ JDK是java软件开发包( ...

  7. Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之七(五十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

  8. Docker 安装-在centos7下安装Docker(二)

    参考docker安装的方式: http://www.runoob.com/docker/centos-docker-install.html Docker中文官网安装步骤:https://docs.d ...

  9. 关于Lombok框架子类继承时EqualsAndHashCode注解的callSuper取值的思考

    先看例子(原始用例来源于这篇文章): TV类 @Getter @Setter //@EqualsAndHashCode @AllArgsConstructor @NoArgsConstructor p ...

  10. SpringCloud Alibaba学习笔记

    目录 目录 目录 导学 为什么学 学习目标 进阶目标 思路 Spring Cloud Alibaba的重要组件 环境搭建 Spring Boot必知必会 Spring Boot特性 编写第一个Spri ...