js下 Day04、DOM操作--自定义属性
语法: 元素.getAttribute(‘自定义属性名’)
功能:获取自定义属性
语法: 元素.setAttribute(‘自定义属性名’,’值’)
功能:设置自定义属性
语法: 元素.removeAttribute(‘自定义属性名’)
功能:删除自定义属性
#一.课堂案例
#1. 标签库
效果图:
功能思路分析:
\1. 找到标签库按钮,绑定点击事件。由于1个按钮既要展开又要做收起,所以需要用一个开关变量来判断(var flag = false;)。为假时点击展开,为真时点击收起。
\2. 循环给每一个li绑定点击事件。由于每一个li既要做选中又要做取消选中,所以需要用类名来判断( classList.contains() )。如果当前类名不存在,点击后则选中:
A. 添加类名( classList.add() )
B. **克隆(cloneNode(true))**一个副本,添加到指定区域( appendChild() )
如果当前类名存在,则取消选中:
A. 删除类名(classList.remove())
B. 找到已选中的所有标签,判断每一个选中的元素和点击的元素**自定义属性(getAttribute())**是否一致
C. 一致则删除(removeChild())
\3. 给克隆的元素绑定点击事件,实现双向删除,并去掉对应标签的类名。
\4. 个数限制,最多只能添加6个,通过选中标签的个数(sel.children.length)来判断。小于6个才可以选中标签,否则显示提示信息。当取消选中标签时,隐藏提示信息。
#二.今日小结
元素.getAttribute(‘自定义属性名’) 获取自定义属性
元素.setAttribute(‘自定义属性名’,’值’) 设置自定义属性
元素.removeAttribute(‘自定义属性名’) 删除自定义属性
元素.checked 复选框的选中状态
#三.作业
效果图:
功能思路分析:
功能一:渲染数据
\1. 声明两个数组存放数据,将第一个数组的内容渲染到第一个盒子,将第二个数组的内容渲染到第二个盒子(渲染: **map(function(item){}).join( ** ‘’));
功能二:标签转移
\2. 点击第一个盒子中的标签添加到第二个盒子中(appendChild())
\3. 点击第二个盒子中的标签添加到第一个盒子中
最新文章
- Java 策略模式和状态模式
- Java开发环境的搭建以及使用eclipse从头一步步创建java项目
- VirtualBox使用总结
- 锁相关知识 &; mutex怎么实现的 &; spinlock怎么用的 &; 怎样避免死锁 &; 内核同步机制 &; 读写锁
- 未能正确加载 ”Microsoft.VisualStudio.Editor.Implementation.EditorPackate“包错误解决方法
- Apache 配置 Basic 认证
- git cheatsheet小抄本
- CSS概述<;选择器总结>;
- 教你利用iframe在网页中显示天气
- 如果利用storyboard创建cell中标识符identifier的正确设置
- OAuth 的权限问题与信息隐忧
- Neighbour table overflow --- arp表溢出
- php目录分隔符DIRECTORY_SEPARATOR
- struts2在&;lt;s:select&;gt;用动态标签
- 五、oracle基本建表语句
- [图解Java]Condition
- python学习笔记比较全
- Python序列之列表 (list)
- Dbshop v1.3任意用户密码重置漏洞
- Java8 新特性之Stream API