1.排他思想
<style>
button{
width: 80px;
height: 50px;
}
</style>
<body>
<button>点我呀</button>
<button>点我呀</button>
<button>点我呀</button>
<button>点我呀</button>
<button>点我呀</button>
<script>
//获取所有的按钮元素
var btn = document.getElementsByTagName('button');
//btn得到的是伪数组 里面的每一个元素btn[i]
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function(){
//先把所有的按钮的背景颜色去掉
for (let i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor='';
}
//让当前的元素背景颜色为pink
this.style.backgroundColor='pink';
}
}
</script>
</body>
2.百度换肤效果
<style>
button{
width: 80px;
height: 50px;
}
/* .d {
margin: 200px auto;
text-align: center;
} */
li {
list-style: none ;
}
body {
background: url(images/1.jpg) no-repeat center top;
}
ul {
width: 100px;
height: 100px;
overflow: hidden;
}
.baidu {
overflow: hidden;
margin: 100px auto;
/* background-color: #fff; */
width: 413px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
<ul class="baidu">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/35.jpg" alt=""></li>
<li><img src="images/41.jpg" alt=""></li>
<li><img src="images/42.jpg" alt=""></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
console.log(imgs);
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function(){
//this.src 点击图片的路径
// console.log(this.src);
//此处使用for循环是提前将所有图片的边框去掉
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.border = '';
}
document.body.style.backgroundImage = 'url('+this.src+')'
this.style.border = '2px solid red';
}
imgs[i].onmouseout = function(){
this.style.border = '';
}
}
</script>
3.表格隔行变色
<style>
table {
border: solid 2px black;
margin: 100px auto;
border-collapse: collapse;
}
td {
border: solid 1px black;
}
.bg {
background-color: blue;
}
</style>
<table>
<thead>
<tr>
<td>小姑凉</td>
<td>小姑凉</td>
<td>小姑凉</td>
<td>小姑凉</td>
</tr>
</thead>
<tbody>
<tr>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
</tr>
<tr>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
<td>迪丽热巴</td>
</tr>
<tr>
<td>古力娜扎</td>
<td>古力娜扎</td>
<td>古力娜扎</td>
<td>古力娜扎</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (let i = 0; i < trs.length; i++) {
trs[i].onmouseover = function(){
this.className = 'bg';
}
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
4.表单全选反选
<table>
<thead>
<tr>
<th><input type="checkbox" id="all"></th>
<th>国籍</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" ></td>
<td>中国</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>美国</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>俄罗斯</td>
</tr>
</tbody>
</table>
<script>
//获取元素
var all = document.getElementById('all');
var tb = document.getElementById('tb').getElementsByTagName('input');
//注册事件
all.onclick =function(){
console.log(this.checked);
for (let i = 0; i < tb.length; i++) {
tb[i].checked = this.checked;
}
}
for (var i = 0; i < tb.length; i++) {
tb[i].onclick = function(){
var flag = true;
//每次点击 都要去循环检查是否被选中
for (var i = 0; i < tb.length; i++) {
if (!tb[i].checked) {
all.checked = false;
flag = false ;
//如果有一个未被选中就不需要继续循环下去了
break;//结束循环
}
}
all.checked = flag;
}
}
</script>
5.自定义属性的操作
//element.getAttribute('属性'); 主要获得自己定义属性
//例如 属性 ziji
<div id="div" ziji = "2"></div>
<script>
var div = document.getElementById('div');
console.log(div.getAttribute('ziji'));
</script>
//element.setAttribute('属性','值');设置属性值,也可以修改属性值
div.setAttribute('ziji','3');
console.log(div.getAttribute('ziji'));
//移除属性 removeAttribute(属性);
div.removeAttribute('ziji');