JavaScript第三天
排他操作
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉所有人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
文章图片
Title - 锐客网 *{
margin: 0;
padding: 0;
}
body{
background: url(../imgs/bgc/1.jpg) no-repeat center top;
}
li{
list-style-type: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
width: 410px;
padding-top: 3px;
background-color: #fff;
}
.baidu li{
float: left;
margin: 0 1px;
/*小手*/
cursor: pointer;
}.baidu img{
width: 100px;
}
文章图片
文章图片
文章图片
文章图片
文章图片
Title - 锐客网
Document - 锐客网 table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}thead tr {
height: 30px;
background-color: skyblue;
}tbody tr {
height: 30px;
}tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}.bg {
background-color: pink;
}
代码
名称
最新公布净值
累计净值
前单位净值
净值增长率
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
003526
农银金穗3个月定期开放债券
1.075
1.079
1.074
+0.047%
文章图片
Title - 锐客网 * {
padding: 0;
margin: 0;
}.wrap {
width: 300px;
margin: 100px auto 0;
}table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}td {
font: 14px "微软雅黑";
}tbody tr {
background-color: #f0f0f0;
}tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
商品
价钱
iPhone8
8000
iPad Pro
5000
iPad Air
2000
Apple Watch
2000
自定义属性操作 获取属性值
文章图片
Title - 锐客网
设置属性值
文章图片
Title - 锐客网
H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
文章图片
Title - 锐客网 节点操作 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
文章图片
【JavaScript第三天】一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
文章图片
节点层级
父级节点
文章图片
我是div
我是span
- 我是li
- 我是li
- 我是li
- 我是li
x子节点
文章图片
Title - 锐客网
- 我是li1
- 我是li2
- 我是li3
- 我是li4
- 我是li5
推荐阅读
- 2018-02-06第三天|2018-02-06第三天 不能再了，反思到位就差改变
- 事件代理
- 数组常用方法一
- 日更第三天，小聪明
- 见习生
- 七天有效阅读训练营第三天
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法