排他操作
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉所有人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button')
// btns[0]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 干掉所有人
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
// for (var i = 0; i < btns.length; i++) {
// btns[i].style.backgroundColor = '';
// }
this.style.backgroundColor = 'blue';
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
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;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../imgs/bgc/1.jpg" alt=""></li>
<li><img src="../imgs/bgc/2.jpg" alt=""></li>
<li><img src="../imgs/bgc/3.jpg" alt=""></li>
<li><img src="../imgs/bgc/4.jpg" alt=""></li>
</ul>
<script>
// 控制 img
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// console.log(this.src)
document.body.style.backgroundImage = 'url('+ this.src +')';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr')
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'bg';
}
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
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;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var j_cbAll = document.getElementById('j_cbAll') // 全选按钮
// 下面的所有复选框
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
// 注册事件
j_cbAll.onclick = function () {
console.log(this.checked)
for (var i = 0; i < j_tbs.length ; i++) {
j_tbs[i].checked = this.checked;
}
}
// 下面的复选框全部选中， 上面的全选自动变成选中
for (var i = 0; i <j_tbs.length ; i++) {
j_tbs[i].onclick = function () {
var flag = true;
// 每次点击下面的复选框都要检查4个小按钮是否全被选中
for (var j = 0; j <j_tbs.length ; j++) {
if(!j_tbs[j].checked){
// 没有被选中
flag = false;
// 只要有一个没选中就不需要判断了
// console.log('flag' + flag)
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
自定义属性操作
获取属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo" index = "1" class="nav"> </div>
<script>
var div = document.querySelector('div');
console.log(div.id) // demo
console.log(div.getAttribute('id')) //demo
console.log(div.getAttribute('index')) //1 自定义
</script>
</body>
</html>
设置属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo" index = "1" class="nav"> </div>
<script>
var div = document.querySelector('div');
console.log(div.id) // demo
console.log(div.getAttribute('id')) //demo
console.log(div.getAttribute('index')) //1 自定义
console.log('++++++++++++++++++++++++++++++++++++++++')
div.id = 'test'
console.log(div.id)
div.className = 'navs';
console.log(div.className)
div.setAttribute('index', 2);
console.log(div.getAttribute('index')) //2 自定义
div.setAttribute('class', 'footer') // footer
// class 特殊
console.log(div.className)
// 移除属性
div.removeAttribute('index')
console.log(div.getAttribute('index')) // null
</script>
</body>
</html>
H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div getTime = "20" data-index = "2" data-list-name="eric"></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('getTime'))
div.setAttribute('data-time', 20)
console.log(div.getAttribute('data-index'))
console.log(div.getAttribute('data-list-name'))
// h5新增
// dataset 是一个集合存放了所有以data开头的自定义属性
console.log(div.dataset)
// 访问map
console.log(div.dataset.index)
console.log(div.dataset['index'])
console.log(div.dataset.listName)
console.log(div.dataset['listName'])
</script>
</body>
</html>
节点操作
节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
节点层级
父级节点
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
// 父节点 parentNode
var erweima = document.querySelector('.erweima');
// 最近的
console.log(erweima.parentNode)
</script>
子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol')
console.log(ol.firstChild)
console.log(ol.lastChild)
console.log(ol.firstElementChild)
console.log(ol.lastElementChild)
// 既兼容 有方便 实际开发
console.log(ol.children[0])
console.log(ol.children[ol.children.length-1])
</script>
</body>
</html>
