JavaScript排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
demo1多个按钮
<button>BTN1</button>
<button>BTN2</button>
<button>BTN3</button>
<button>BTN4</button>
<button>BTN5</button>
<script>
var btns = document.querySelectorAll("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 = "cyan";
}
}
</script>
首先去获取的一个伪数组
利用双重for循环
首先先排除其他人,然后才设置自己的样式,这种排除其他人的思想我们称为排他思想
demo2全选反选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var cbAll = document.querySelector("#j_cbAll");
var cbItems = document.querySelectorAll("#j_tb input");
cbAll.onclick = function () {
for (var i = 0; i < cbItems.length; i++) {
cbItems[i].checked = this.checked;
}
}
for (var i = 0; i < cbItems.length; i++) {
cbItems[i].onclick = function () {
var flag = true;
for (var i = 0; i < cbItems.length; i++) {
if (!cbItems[i].checked) {
flag = false;
break;
}
}
cbAll.checked = flag;
}
}
</script>
</body>
demo3表格隔行变色
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'bg';
}
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
demo4打开一个视口
<a href="javascript:popUP('http://www.baidu.com/');">baidu</a> //Chrome会拦截弹窗,允许即可
<script>
function popUp(winURL) {
window.open(winURL, " popup", "width=400,height=280");
}
popUp('http://www.baidu.com/');
</script>
demo5循环精灵图
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(../img/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
var index = i * 44;
lis[i].style.backgroundPosition = `0 -${index}px`;
}
</script>
</body>
demo6tab栏切换
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list'); //获取dom元素
var lis = tab_list.querySelectorAll('li'); //获取dom元素
var items = document.querySelectorAll('.item'); //获取dom元素
for (let i = 0; i < lis.length; i++) { //给所有li 注册事件
lis[i].setAttribute('index', i); //给遍历到的li 添加 index = i 的属性和属性值
lis[i].onclick = function () { //绑定函数
for (let i = 0; i < lis.length; i++) { //第一遍循环
lis[i].className = ''; //给遍历到的li 赋空值;
}
this.className = 'current'; // 给遍历到的函数添加类名为'current'
var index = this.getAttribute('index'); //获取 index这个dom元素
console.log(index);
for (let i = 0; i < items.length; i++) { //给遍历到的Dom添加 事件
items[i].style.display = 'none';
}
items[i].style.display = 'block';
}
}
</script>
</body>
demo表单提交
<style>
/* * {
margin: 0;
padding: 0;
} */
div {
display: flex;
align-items: center;
}
input {
margin-left: 10px;
width: 200px;
height: 20px;
}
table {
width: 600px;
cursor: pointer;
}
table td {
text-align: center;
}
table th {
background-color: blueviolet;
}
table tr {
background-color: pink;
}
</style>
</head>
<body>
<div>
<p>请输入姓名:</p>
<input type="text" id="username" value="">
</div>
<div>
<p>请输入邮箱:</p>
<input type="text" id="email" value="">
</div>
<button>添加</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>小黑</td>
<td>eocho@126.com</td>
</tr>
<tr>
<td>小白</td>
<td>echo@alibaba.com</td>
</tr>
</tbody>
</table>
<script>
var username = document.querySelector("#username");
var btn = document.querySelector("button");
var email = document.querySelector("#email");
// btn.onclick = function () {
// if (username.value === "" || email.value === "") {
// alert("不要提交空信息");
// return;
// }
// var tr = document.createElement("tr"); // 声明创建一个tr
// tb.appendChild(tr); // 在tb节点插入tr
// var td = document.createElement("td");
// td.innerHTML = username.value;
// tr.appendChild(td);
// var td2 = document.createElement("td"); //声明:创建一个变量名为tb2的tb标签
// td2.innerHTML = email.value; //把email.value值写入tb2
// tr.appendChild(td2);
// }
btn.onclick = function () {
if (username.value.trim() === "" || email.value.trim() === "") {
alert("请输入正确的值");
return;
}
var tr = document.createElement("tr");
tb.insertBefore(tr, tb.children[0]);
var td = document.createElement("td");
td.innerHTML = username.value;
tr.insertBefore(td, tr.children[0]);
var td2 = document.createElement("td");
td2.innerHTML = email.value;
tr.insertBefore(td2, tr.children[0]);
username.value = email.value = "";
}
</script>