排他思想

最新推荐文章于 2024-09-26 01:42:12 发布

yyyyyyoow

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量355

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mobolove/article/details/140047556

版权

排他思想
首先先排除其他人，然后才设置自己的样式这种排除其他人的思想我们成为排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素 getElementsByTagName兼容以前的版本，querySelectorAll不兼容以前的版本
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';

}
}
</script>
</body>
例百度换肤
<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>
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
例表格鼠标经过行变色
<script>
// 1.获取元素获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>

例表单全选和取消全选（重要）
<script>
var j_cbAll = document.getElementById('j_cbAll');
var j_chs = document.querySelector('tbody').querySelectorAll('input');
j_cbAll.onclick = function () {
for (var i = 0; i < j_chs.length; i++) {
j_chs[i].checked = j_cbAll.checked;
}
}

for (var i = 0; i < j_chs.length; i++) {

j_chs[i].onclick = function () {
var flag = true;
for (var i = 0; i < j_chs.length; i++) {
if (!j_chs[i].checked) {
flag = false;
}
}
j_cbAll.checked = flag;
}
}
</script>