JavaScript11——js案例

最新推荐文章于 2024-07-31 18:16:05 发布

I have a lemon

最新推荐文章于 2024-07-31 18:16:05 发布

阅读量365

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/m0_37483148/article/details/108792192

版权

前端专栏收录该内容

89 篇文章 1 订阅

订阅专栏

跟着老师学了许多小案例，这边做一个小总结

1.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:

1. 所有元素全部清除样式(干掉其他人)
2. 给当前元素设置样式 (留下我自己)
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

 
<button>按钮1</button> 
<button>按钮2</button>
 <button>按钮3</button>
 <button>按钮4</button>
 <button>按钮5</button> 
<script>
// 1. 获取所有按钮元素
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>

2.换肤

 
<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>

3.表单各行变色

 
<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>

4.全选案例（很重要）

 
<script>
// 1. 全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按
钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全选按钮注册事件 
j_cbAll.onclick = function() {
// this.checked 当前复选框的选中状态
 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() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中 
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) { 
flag = false;
break;
 }
}
// 设置全选按钮的状态
j_cbAll.checked = flag;
 }
}
</script>

I have a lemon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript11——js案例

跟着老师学了许多小案例，这边做一个小总结1.排他思想如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:1. 所有元素全部清除样式(干掉其他人) 2. 给当前元素设置样式 (留下我自己) 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <butto
复制链接

扫一扫

专栏目录