1. for in 和 for of
(1) for in 用于数组
var arr = [1,2,3];
for(var k in arr){
console.log(k);
console.log(arr[k]);
}
// 输出结果:
0
1
1
2
2
3
// k 表示数组索引号， arr[k] 表示数组元素
(2) for in 用于对象
var obj = {
name: 'sam',
age: 1,
sex: '男',
fun: function(){
}
}
for(var k in obj){
console.log(k);
console.log(obj[k]); // 这里不能用obj.k 这样会直接查找obj对象里面的k属性
}
//输出结果:
name
sam
age
1
sex
男
fun
[Function: fun]
// k 表示对象的属性名，obj[k]表示对象的属性值
(3) for of 用于数组
var arr = [1,2,3];
for(var k of arr){
console.log(k);
console.log(arr[k]);
}
// 输出结果:
1
2
2
3
3
undefined
// k 表示数组中的元素
(4) for of不能用于对象，因为TypeError: obj is not iterable（对象是不可迭代的）
2. 给单击之后的按钮添加背景颜色
<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）然后才让当前的元素换背景颜色
// 这里是this
this.style.backgroundColor = 'pink';
}
}
</script>
3. 全选与取消全选
<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>800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iphone8</td>
<td>800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iphone8</td>
<td>800</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>iphone8</td>
<td>800</td>
</tr>
</tbody>
</table>
</div>
<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; // 可以得到当前复选框的选中状态，
如果是true 就是选中，
如果是false 就是未选中
for(var i = 0 ;i<j_tbs.length;i++){
j_tbs[i].checked = this.checked;
// 全选与取消全选
}
}
// 2.下面复选框需要全部选中，上面全选才能选中做法：
给下面所有复选框绑定点击事件，
每次点击，都要循环检查这四个小按钮是否全部被选中
for(var i = 0 ; i<j_tbs.length;i++){
j_tbs[i].onclick = function(){
//flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查这四个小按钮是否全部被选中
for(var i = 0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
flag = false;
break; // 退出for循环 提高执行效率
因为只要有一个没有选中 剩下的就无需循环
}
}
j_cbAll.checked = flag;
}
}
</script>
4. tab栏切换
<style>
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list::after{
content: '';
clear: both;
display: block;
}
.current{
background-color: #c81623;
color: #fff;
}
.item_info{
padding: 20px 0 0 20px;
}
.item{
display: none;
}
</style>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</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">
商品评价模块
</div>
<div class="item">
手机社区装模块
</div>
</div>
</div>
<script>
// 1. 上面的模块选项卡，点击某一个，当前这一个底色会是红色，
其余不变（排他思想）修改类名的方式
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环 绑定点击事件
for(var i = 0 ; i<lis.length; i++){
// 开始给 五个 li 设置索引号
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
// 干掉所有人 其余的li清除class 这个类
for(var i = 0;i<lis.length;i++){
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
// 干掉所有人 让其余的item 这些div 隐藏
for(var i = 0;i<items.length;i++){
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
5. 创建元素，添加文本，添加元素，删除元素
// (1)创建元素
var li = document.createElement('li');
// (2)给li添加文本
li.innerHTML = text.value;
// (3)添加元素
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
// (4)删除元素
ul.removeChild(ul.children[0]);
6. tab栏切换
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环 绑定点击事件
for(var i = 0 ; i<lis.length; i++){
// 开始给 五个 li 设置索引号
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
// 干掉所有人 其余的li清除class 这个类
for(var i = 0;i<lis.length;i++){
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
// 干掉所有人 让其余的item 这些div 隐藏
for(var i = 0;i<items.length;i++){
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
7. 获取URL中的参数，并进行格式化
console.log(location.search); // ?username=andy
// 1.先去掉? 利用substr('起始位置',截取几个字符) 截取字符串
var params = location.search.substr(1);
console.log(params); // username=andy
// 2.利用'='把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr); // [ "username", "andy" ]
var div = document.querySelector('div');
// 3.把数据写入div中
div.innerHTML = arr[1] + '欢迎你';
8. 箭头函数保存this
<div id="ad"></div>
<script>
let ad = document.getElementById('ad');
ad.addEventListener('click',function(){
let _this = this;
setTimeout(function(){
_this.style.background = 'pink';
// this.style.backgroundColor = 'pink'; // 这里的this 指向window
},2000)
})
</script>
// 使用箭头函数
<script>
let ad = document.getElementById('ad');
ad.addEventListener('click',function(){
setTimeout(() => {
this.style.background = 'pink';
},2000)
})
</script>
| 
