一、排它思想
排它思想，适合多选一的情况，先遍历把所有的样式清掉，再设置当前被点击的样式
案例
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 排它思想，适合多选一的情况，先遍历把所有的样式清掉，再设置当前被点击的样式
var btns = document.querySelectorAll('button')
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function (){
for (var j = 0; j < btns.length; j++){
btns[j].style.backgroundColor = ''
}
this.style.backgroundColor = 'pink'
//this不能换成btns【i】
}
}
</script>二、百度换肤
遍历图片，把图片的地址换成body背景图片的地址
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
var imgs = document.querySelectorAll('.baidu li img')
var bd = document.body
// 遍历图片
for (var i = 0; i < imgs.length; i++){
imgs[i].onclick = function(){
bd.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>三、表格隔行变色
//获取每行表格
var trs = document.querySelectorAll('tbody tr')
// console.log(trs.length)
// 遍历tr
for (var i = 0; i < trs.length; i++){
// 绑定鼠标经过事件
trs[i].onmouseover = function(){
this.style.backgroundColor = 'pink'
}
// 绑定鼠标离开事件
trs[i].onmouseout = function(){
this.style.backgroundColor = ''
}
}四、复选框
<script>
// 选中第一个复选框
var j_cbAll = document.querySelector('#j_cbAll')
var inps = document.querySelectorAll('#j_tb input')
// 全选或全不选
j_cbAll.onclick = function () {
for (var i = 0; i < inps.length; i++) {
// 每个框的选择状态和第一个框的选择状态相同
// 框被选返回的值是true，再取消返回的是false
inps[i].checked = this.checked
}
}
// 下面框全选，全选框自动选中
// 给下面每个框绑定点击事件
for (var i = 0; i < inps.length; i++){
// 绑定点击事件
inps[i].onclick = function(){
// 假设第一个框是被选中的
var flag = true
// 遍历下面的框，只要有一个没有选中，就把flag的值设置成false
for (var i = 0; i < inps.length; i++){
// 不被选中才会进入
if (!inps[i].checked){
flag = false;
break
}
}
j_cbAll.checked = flag
}
}
</script>五、获取自定义的属性
用于处理标签不固有的属性，标签固有的属性直接使用ele.属性名获得
ele.getAttribute( ) 获得
ele.removeAttribute( ) 删除
ele.setAttribute( ) 设置
六、h5新增属性data
dataset，多个连接单词用驼峰命名
<div data-index = "1" data-pa-b = 0></div>
<script>
var div = document.querySelector('div')
console.log(div.dataset) //{index: '1', paB: '0'} {}是对象
console.log(div.dataset.index) //
console.log(div.dataset['index'])
var a ='index'
console.log(div.dataset.a) //找不到index ，相当于找div里的data-a属性
console.log(div.dataset[a])
div.dataset.paW = 1;//设置新的属性
</script>七、tab栏案例
<script>
var lis = document.querySelectorAll('.tab_list ul li') //获取li
var items = document.querySelectorAll('.tab_con .item') //获取对应的内容
for (var i = 0; i < lis.length; i++){ //遍历所有的li
lis[i].setAttribute('index', i) //给每个li添加索引号
// 给每个li添加点击事件
lis[i].onclick = function (){
// 把所有li的样式初始化
for (var j = 0; j < lis.length; j++){
lis[j].className = ''
}
this.className = 'current' //给当前li设置样式
var idn = this.getAttribute('index') //获取索引号
// 遍历，把所有的内容隐藏
for (var k = 0; k < items.length; k++){
items[k].style.display = 'none'
}
items[idn].style.display = 'block' //让当前内容显示
}
}
</script>八、节点
<div class="box">
<span class="erweima">×</span>
</div>
<script>
// 只能用document.querySelector，用标签parentNode选择不到父节点
var span = document.querySelector('.erweima')
console.log(span)
console.log(span.parentNode)
var ul = document.querySelector('ul')
console.log(ul.childNodes) //所有节点，包括文本节点
console.log(ul.children) //推荐使用
</script>