js之排他思想及案例
案例一:五个按钮,点击谁谁的背景颜色变成粉色
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//先把所有的背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//然后再让当前的元素按钮变色
this.style.backgroundColor = 'pink';
}
}
案例二百度换肤效果
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
//点击图片的路径给body
// console.log(this.src);
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
案例三表格经过变色
//获得
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
//鼠标经过
trs[i].onmouseover = function() {
this.className = 'bg';
}
//鼠标离开恢复 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
案例四:表单全选取消全选
//1.全选和取消全选
//获取元素
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;
//这里不用++‘’是因为this.checked被识别为一个关键字
}
}
//2.复选按钮影响上面的
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
//控制全选按钮是否选中
var flag = true;
// console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
//只要有一个没被选择中就不用判断剩下的了
break;
}
}
j_cbAll.checked = flag;
}
}
版权声明:本文为m0_61547956原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END