js下 Day07、DOM案例
一.折叠菜单
效果图:
功能思路分析:
功能一:数据渲染
\1. 模拟数据,一级数据为数组套对象的形式,二级数据为数组;
\2. 先渲染一级数据,然后再嵌套渲染二级数据(map().join(‘’));
功能二:子菜单的显示隐藏
\1. 定义一个初始下标index = 0;
\2. 给每一个一级菜单绑定点击事件,点击一级菜单时要干三件事:
(1) 上一个二级菜单隐藏
(2) 修改为当前点击项的下标
(3) 当前点击项的二级菜单显示
#二.留言板
效果图:
功能思路分析:
功能一:头像高亮
\1. 给每一个头像绑定点击事件,通过active类名的切换实现头像高亮显示
\2. 记录图片路径,后面发表留言要用。
功能二: 发表留言
\1. 点击广播按钮发布留言,但是需要满足二个条件才能发表留言:
(1) 用户名文本框必须有内容( user.value.trim().length > 0 )
(2) 内容框文必须有内容( user.value.trim().length > 0 )
\2. 以上条件为真后要做的事情
(1) 调用发表留言的方法
(2) 调用初始化方法(清空文本框等)
(3) 发表成功数量加1
功能三:删除留言
\1. 在留言发表成功后调用删除留言的方法( 动态创建的元素必须在创建之后才能找到 );
\2. 找到删除按钮,绑定点击事件,将整条评论删除( removeChild() )
功能四:统计字数
通过input事件监听内容文本框的输入,剩余字数 = 总字数 - 文本框内容长度
#三.今日小结
1.监听文本框输入事件: input
2.类名的添加和删除: classList.add() classList.remove()
3.节点的创建和删除: document.appendChild() document.removeChild()
4.下一个元素兄弟: nextElemenSibling
5.DOM2级事件绑定: **addEventListener( ** ‘事件类型’,function(){})
#四.作业 -- 三级菜单
效果图:
功能要求:
\1. 鼠标经过菜单高亮显示,具体样式参考录屏演示
\2. 点击+号可以展开(显示)子菜单
\3. 点击-号可以折叠(隐藏)子菜单
\4. 注意展开与折叠时找到对应关系,点击一级菜单,二级菜单发生切换,点二级三级子菜单发生切换
js下 Day07、DOM案例的更多相关文章
- JS 下拉菜单案例
css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...
- js下 Day12、案例
一.垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 2. 鼠标移动 ( ...
- js下 Day11、案例
一.成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- js 字符串转dom 和dom 转字符串
js 字符串转dom 和dom 转字符串 博客分类: JavaScript 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...
- NPM酷库:jsdom,纯JS实现的DOM
NPM酷库,每天两分钟,了解一个流行NPM库. 昨天认识了一个在Node.js环境下操作HTML的库 cheerio,cheerio实现了jQuery接口,用起来十分方便.为什么不直接用jQuery呢 ...
- z-tree官方提供的下拉菜单案例
1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
随机推荐
- Guitar Pro使用技巧之乐段回放练习
Guitar Pro中的"回放"功能是我们在吉他练习中非常常用的一项功能.我们在吉他练习中碰到某一乐段比较练习比较困难时,我们就可以用鼠标在Guitar Pro上选中该乐段,然后进 ...
- MathType颜色设置的技巧
MathType功能非常强大,在编辑公式时使用非常方便.运用MathType不仅可以改变公式的字体和字号,也可以改变公式字体颜色,MathType颜色设置还是有一套技术的,下面我们就一起来看看公式编辑 ...
- 如何用Folx的浏览器集成功能设置捕获类型
Folx的浏览器集成功能,可将Folx的下载功能添加到浏览器的上下文菜单(也就是右键快捷菜单)中,方便用户使用Folx捕获页面中的下载链接,并创建下载任务. 那么,用户需要进行哪些设置才能使用Folx ...
- 如何卸载MathType 7?
作为好用的公式编辑器,一般情况下是不会将其从电脑上卸载的,但是当电脑负荷过多,导致电脑运行缓慢时,就需要考虑卸载一些软件,本节就来学习卸载MathType 7的方法. 具体操作步骤如下: 1.打开控制 ...
- vulnhub: DC 3
通过nmap扫描,只开放了80端口,并且该web服务是基于Joomla搭建: root@kali:~# nmap -A 192.168.74.140 Starting Nmap 7.80 ( http ...
- layui $().click() 失效问题
//使用此点击事件失效 $(".sub2").on('click', function() { alert('响应点击事件'); }); //将指定的事件绑定在document上, ...
- Linux如何安装Docker?
使用yum安装(centos7) Docker要求Centos系统的内核版本高于3.10,安装Docker前需要验证你的服务器内核版本是否支持Docker. 通过 uname -r 命令来查看你的服务 ...
- LinuxKernel(一)
首先,回顾一下基础的宏操作: C语言宏 #与## #的作用是字符串化:在一个宏中的参数前面使用一个#,预处理器会把这个参数转换为一个字符数组 #define ERROR_LOG(info) fprin ...
- XOR性质
异或XOR的性质: 1. 交换律 2. 结合律 3. x^x = 0 -> 偶数个异或为0 4. x^0 = x -> 奇数个异或为本身 5. 自反性:a^b^b = a^0 =a
- PyQt(Python+Qt)学习随笔:QTableWidget的findItems和selectedItems搜索项和访问选中项方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.搜索项 在表格部件中,可以根据文本以及匹配模式来搜索满足条件的项,调用语法: list[QTab ...