JavaScript WebAPI学习
这篇文章讲解了修改元素属性,自定义属性,节点的增删添加删除等操作
这篇文章实在是太长了,里面主要有一些代码占据了很多的空间,我尝试能不能把他们折叠起来
这篇博客是初学者写下的笔记,如有错误,欢迎前来指正!
最后推荐大家看这部分知识点的总结,六分钟回顾一下这里的知识点
js案例
案例:排他思想
- 案例:当点击一个按钮时选中它,并且其他的按钮都恢复未被选中的状态 (不能出现多个按钮同时被选中的状态)
- 思考过程:在选中之前把其他的选中都去掉
- 先把其他元素的样式清除掉
- 在设置自己的样式
- 代码示例:
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
// 1. 获取所有按钮元素
var btns = document.querrySelectorAll('button');
// 返回含有三个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 = 'blue';
}
}
</script>
</body>
案例:百度换肤
- 这里我们没有图片做背景,还是用颜色作为背景
- 就是点击一个按钮,然后整个网页的颜色就会改变
- 代码示例:
<head>
<style>
ul li {
float: left;
list-style: none;
}
.color ul li:first-child {
height: 40px;
width: 40px;
}
.color ul li:nth-child(2) {
height: 40px;
width: 40px;
}
.color ul li:nth-child(3) {
height: 40px;
width: 40px;
}
.color ul li:last-child {
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<div class="color">
<ul>
<li><img src="1.ipg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
</ul>
</div>
<script>
var items = document.querySelector('.color'). querySelectorAll('img');
console.log(items);
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
console.log(this.style.backgroundColor);
// 这里需要注意一下,这里需要两边加上url()
document.body.style.backgroundColor = 'url(' +this.src+')';
}
}
</script>
</body>
案例:当前行变色
- 实现效果:鼠标放在一行上,该行变色,鼠标移开时该行变成原来的颜色
- 做法:直接用 onmouseover 事件和 onmouseout 两个事件更改背景颜色
- 代码示例:
<body>
<div class="table">
<div class="thead">表头</div>
<div class="tbody">
<ul>
<li>行1<li>
<li>行2<li>
<li>行3<li>
</ul>
</div>
</div>
<script>
// 多重选择
var tbody = document.querySelector('.tbody'). querySelectorAll('li');
for (var i = 0; i < tbody.length; i++) {
// 鼠标经过事件
tbody[i].onmouseover = function() {
this.style.backgroundColor = 'gray';
}
// 鼠标离开事件
tbody[i].onmouseout = function() {
this.style.backgroundColor = '';
}
}
</script>
</body>
案例:表单全选取消
-
要求:有一个全选按钮,当所有元素都被选中时他也被选中,反之只要有一个还是没有选中的状态他就没有选中,点击他可以实现全选与非全选之间的切换,同样,下面有一个按钮未选中时全选按钮就不选中,下面所有按钮选中时上面全选按钮选中
-
操作思路:
- 全选按钮影响下面的按钮:给全选按钮绑定点击事件&#