1. 排他思想
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
1.// 给button遍历绑定事件 不然只能一个一个的绑定事件
重点!!!
// 这个的for循环开始已经结束了 所以能用btns[i],需要用this,循环完了i已经等于5了,最大的下标为4,所以为undefined
1.1 tab栏点击改变颜色案例
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<scritpt>
//1.获取元素
var btns = document.querySelectorAll('button');
//2.绑定事件 设置程序
// 给button遍历绑定事件 不然只能一个一个的绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
// 这个的for循环开始已经结束了 所以能用btns[i],
// 后面i已经为5了,所以为undefined;
// 排他思想
// 遍历把所有人干掉 包括我自己
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
// 给自己套复活甲 复活
this.style.backgroundColor = 'skyblue';
})
}
</script>
1.2 隔行变色案例
这里最好是通过类名来修改属性,不要修改js函数里面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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: skyblue;
}
</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>
//1.获取元素
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.循环注册事件
for (var i = 0; i < trs.length; i++) {
trs[i].addEventListener('mouseover', function () {
//第一种方法 利用排他思想
// for (var j = 0; j < trs.length; j++) {
// trs[j].className = '';
// }
this.className = 'bg'
})
// 第二种 正常方法 鼠标移入和移出时候 修改类名 来修改属性
trs[i].addEventListener('mouseout', function () {
this.className = '';
})
}
</script>
</body>
</html>
1.5tab栏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
//1. 上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
// 获取元素
// var tab_list = document.querySelector('.tab_list');//这里的名字一定要是带.的类名!!!!!
// var lis = document.querySelectorAll('li');
// var items = document.querySelectorAll('.item');//这里的名字一定要是带.的类名!!!!!
// for (var i = 0; i < lis.length; i++) {
// lis[i].setAttribute('index', i)//一定要注意 这是set设置,不是get获取,不然不会增加index属性
// lis[i].onclick = function () {
// for (var i = 0; i < lis.length; i++) {
// lis[i].className = '';
// }
// //留下我自己
// this.className = 'current';
// //2.下面的显示内容模块
// var index = this.getAttribute('index');
// // 排他思想 干掉其他所有的属性,只保留自己
// for (var i = 0; i < items.length; i++) {
// items[i].style.display = 'none'
// }
// items[index].style.display = 'block';
// }
// }
// 1.获取元素
var lis = document.querySelectorAll('.tab_list li');
var items = document.querySelectorAll('.tab_con .item');//又是这里有问题,如果是classname一定要注意!!!!前面要带点
// 2.注册事件
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove('current');
}
this.classList.add('current')
var index = this.index;
for (var j = 0; j < items.length; j++) {
items[j].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
2.自定义属性操作
2.21 获取属性值
div.getAttribute();
2.22设置属性值
div.setAttribute();
2.23 移除属性
div.removeAttribute();
3.H5自定义属性
自定义属性的目的:是为了保存并使用数据.有些数据可以保存在页面中而不保存到数据库中
自定义属性获取通过getAttribute(‘属性名’)获取.
1.第一种获取方法:getAttribute('data-index');
getAttribute('data-list-name');
2.第二种和获取方法:dataset.listName;
dataset['listName']
4.节点操作
4.1父级节点
console.log(erweima.parentNodae);
4.2子元素节点
1.第一种:console.log(ul.childNodes)(基本用不到)
2.第二种:console.log(ul.children);(最常用的)
console.log(ul.children[0]);获取第一个子节点
console.log(ul.children[ul.children.length-1]);
4.3 兄弟节点
- 1.上/下一个兄弟节点
1.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
2.previousSibling 上一个兄弟节点
- 2.得到上/下一个兄弟
元素节点
1.nextElementSibling 得到下一个兄弟元素节点
2.previousElementSibling 上一个兄弟元素节点
4.31兄弟节点 兼容性解决方案
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
4.4.创建节点
var li = document.createElement('li)
4.5.添加节点
- 1.将一个节点添加到指定父节点的子节点列表
末尾
,类似于css的after伪元素
1.node.appendChild(child)
- 2.将一个节点添加到父节点指定子节点
前面
.类似css里面的before伪元素
1.创建元素节点
var li = document.creareElement('li');
2.添加节点 node.appendChild(child) node父级 child 是子级 后面追加元素
var ul = docunment.querySelector('ul');
ul.appendChild(li);
3.添加节点 node.insertBefor(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.chileren[0]);
4.6案例简单版发布留言
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
1.获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
2.注册事件
btn.onclick = function(){
1.创建子元素
var li = document.createElement('li');
先有li才能赋值
li.innerHTML = text.value;
2.添加元素
ul.insertBefor(li,ul.children[0]);
}
</script>
</body>