注意：接上一篇文章 《第一周（二）》
21、for循环
循环：重复做一件事情
1、for循环
for (设置循环起始值; 设置循环执行的条件; 步长累加;) {
// 循环体：重复做的事情都在循环体中
}
案例剖析：
1、设置初始值
2、验证条件
3、条件成立，执行循环体; 不成立，循环结束;
4、步长累加
for (var i=0; i<5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(i);
var i = 0;
for(;i<5;) {
console.log(i); // 没有步长累加，我们的i永远是0, 循环条件永远成立"死循环"
// 项目中不能出现死循环，一旦出现，循环下面的事情都做不了
}
console.log(i); // 5
var i = 0;
for(;i<5;i+=2){
console.log(i); // 0 2 4
}
console.log(i); // 6
continue只有一个作用，就是让continue后面的代码不执行了。
直接去执行下一轮。
for(var i=0;i<5;i++) {
continue; // 结束本轮循环，继续执行下一轮：循环体中continue后面的代码都不会
// 在执行，它会直接的去执行步长，然后进入到下一轮。
}
console.log(i);
break， 它的本意是结束整个循环。
循环体中一旦遇到break，首先后面代码不执行了，而且步长累加也不执行了。循环都结束了。
BAT面试题：
for(var i=1; i<10; i+=2) {
if(i<5) {
i++;
continue;
} else {
i+=3;
break;
}
console.log(i); // 10
}
问输出几次，结果分别是多少？
输出一次，结果为10
循环过程：
当i=1时，if (i<5)为true, 执行i++， 然后i变为2。然后continue下面的代码，都不执行了。所以，console.log(i)也不会执行。
来第二轮， i=2时，也会走 if(i<5)，所以，执行i++， i变为5。遇到continue，所以，
console.log(i)也不会执行。
第三轮， i=7时，if (i<5)为true， 所以，执行else{} 里面的内容， 执行i+=3，然后i变为10。遇到break，然后循环结束了。
所以，最终结果，输出10
22、隔行变色（JS实现）
<ul class="newsBox" id="newsBox">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
<li><a href="#">555</a></li>
<li><a href="#">666</a></li>
<li><a href="#">777</a></li>
<li><a href="#">888</a></li>
<li><a href="#">999</a></li>
<li><a href="#">101010</a></li>
</ul>
<script>
var newsBox = document.getElementById('newsBox');
var newsList = newsBox.getElementsByTagName('li');
for (var i=0; i<newsList.length; i++) {
// if ( i % 2 === 1) {
// newsList[i].style.backgroundColor = '#EEE';
// }
// 可以改成三元运算符
// i % 2 === 1 ? newsList[i].style.backgroundColor = '#EEE' : null;
// 可以改写成switch case
switch ( i % 2) {
case 1:
newsList[i].style.backgroundColor = '#EEE';
break;
}
}
</script>
23、JS中简单的DOM操作1
1、这一节和上一节（隔行变色）重复
24、JS中简单的DOM操作2
1、document.getElementById(‘xxx’)
var newsBox = document.getElementById('newsBox');
// 除了以上一些常用的内置属性，我们很多时候会给元素对象设置一些自定义的属性
newsBox.myAttribute = xxx;
newsBox['myAttribute'] = xxx;
2、[context].getElementsByTagName()
在指定上下文[context]中，通过元素的标签名来获取一组元素
var newsBox = document.getElementById('newsBox');
var newsList = newsBox.getElementsByTagName('li'); // 获取的结果也是一个对象数据类型的值
console.dir(newsList); // HTMLCollection(10), 是一个元素集合类
typeof newsList = "object";
newsList[0] // 获取第一个LI
newsList[1] // 获取第二个LI
newsList[n] // 获取第N+1个LI
newsList.length
关于HTMLCollection：
1、以数字作为属性名，每一个属性存储的都是获取到的每一个li，JS中我们把数字属性名叫做"索引",(索引是逐级递增的)
2、有一个length属性存储的是当前集合中LI的个数
具备以上的两个特点特别像数组，但是不是数组，所以我们把他称之为 “类数组”
25、实现奇数行和偶数行变色
1、本节和第22节(隔行变色)重复
26、实现选项卡的基础样式
CSS：
<style>
* {margin:0;padding:0;font-size: 14px;}
ul {list-style: none;}
.tabBox {width: 500px; margin: 20px auto;}
.tabBox > ul {overflow: hidden;position: relative; top:1px;}
.tabBox ul li {padding: 0 10px; float:left; margin-right: 10px; height: 35px;
line-height: 35px;border:1px solid #999;background: #CCC;cursor: pointer;}
.tabBox ul li.select {background: #FFF; border-bottom-color: #FFF;}
.tabBox ul:after {display: block;content: '';clear: both;}
.tabBox div {display: none;height: 150px; line-height: 150px;text-align: center;border:1px solid #999;}
.tabBox div.select {display: block; background: #FFF;}
</style>
HTML：
<div class="tabBox">
<ul>
<li class="select">新闻</li>
<li>电影</li>
<li>音乐</li>
</ul>
<div class="select">热烈庆祝中国召开19大</div>
<div>羞羞的铁拳</div>
<div>毛不易-消愁</div>
</div>
27、使用自定义属性思想实现选项卡
// 第一轮
oList[0].onclick = function () {
"console.log(i);" // 给元素点击事件绑定方法，点击才执行，此处绑定属于创建函数，
// 空间中存储的都是字符串：i不是变量，是字符
}
// 第二轮
oList[1].onclick = function () {
"console.log(i);"
}
// 第三轮
oList[2].onclick = function () {
"console.log(i);"
}
// 循环结束 i=3
假设用户开始点击第二个li，开始执行第二个绑定的方法(方法执行：
形成一个新的作用域，把之前存储的字符串变为代码执行，console.log(i) )
正确写法：
<script>
// 不管点击哪一个li，首先让所有的li(DIV)都移除select, 再让当前点击的有select样式类
var tabBox = document.getElementById('tabBox'),
oList = tabBox.getElementsByTagName('li'),
oDivList = tabBox.getElementsByTagName('div');
// 创建一个函数实现页卡切换的功能
function change(index) {
// index: 形参，实现方法的时候我们不知道用户点击的是哪一个li,
// 设定一个入口，当用户点击需要页卡切换的时候，只要执行change方法，
// 并把点击这个li的索引传递给我们，我们就可以在oList集合中通过索引获取
// 到当前点击的这个li对象
// 让所有的li和DIV移除select样式类
for (var i = 0; i < oList.length; i++) {
oList[i].className = '';
oDivList[i].className = '';
}
// 让当前点击的这个li有选中的样式
oList[index].className = 'select';
oDivList[index].className = 'select';
}
// 给每一个li,绑定点击事件，点击的时候执行change方法，把当前点击li的索引传递进来，实现页卡的切换。
for (var i = 0; i < oList.length; i++) {
// 给每个元素增加一个自定义属性myIndex
oList[i].myIndex = i;
oList[i].onclick = function () {
// 不管点击哪一个li， 输出的结果都是3, 也就是此处的i并不是想象中点击的这个li的索引
// console.log(i); // 3
// 此处需要传递当前点击这个li的索引
// this: 就是当前点击的这个li
// this.myIndex: 就是当前点击这个li的myIndex这个自定义属性的值
change(this.myIndex);
};
}
</script>
28、选项卡的其它实现办法
除了自定义属性，来做选项卡，还有其他的方式。
1、使用闭包来实现
<script>
// 不管点击哪一个li，首先让所有的li(DIV)都移除select, 再让当前点击的有select样式类
var tabBox = document.getElementById('tabBox'),
oList = tabBox.getElementsByTagName('li'),
oDivList = tabBox.getElementsByTagName('div');
// 创建一个函数实现页卡切换的功能
function change(index) {
// index: 形参，实现方法的时候我们不知道用户点击的是哪一个li,
// 设定一个入口，当用户点击需要页卡切换的时候，只要执行change方法，
// 并把点击这个li的索引传递给我们，我们就可以在oList集合中通过索引获取
// 到当前点击的这个li对象
// 让所有的li和DIV移除select样式类
for (var i = 0; i < oList.length; i++) {
oList[i].className = '';
oDivList[i].className = '';
}
// 让当前点击的这个li有选中的样式
oList[index].className = 'select';
oDivList[index].className = 'select';
}
// 给每一个li,绑定点击事件，点击的时候执行change方法，把当前点击li的索引传递进来，实现页卡的切换。
for (var i = 0; i < oList.length; i++) {
~function (i) {
oList[i].onclick = function () {
change(i);
};
}(i);
}
</script>
2、闭包的另一种写法
<script>
// 不管点击哪一个li，首先让所有的li(DIV)都移除select, 再让当前点击的有select样式类
var tabBox = document.getElementById('tabBox'),
oList = tabBox.getElementsByTagName('li'),
oDivList = tabBox.getElementsByTagName('div');
// 创建一个函数实现页卡切换的功能
function change(index) {
// index: 形参，实现方法的时候我们不知道用户点击的是哪一个li,
// 设定一个入口，当用户点击需要页卡切换的时候，只要执行change方法，
// 并把点击这个li的索引传递给我们，我们就可以在oList集合中通过索引获取
// 到当前点击的这个li对象
// 让所有的li和DIV移除select样式类
for (var i = 0; i < oList.length; i++) {
oList[i].className = '';
oDivList[i].className = '';
}
// 让当前点击的这个li有选中的样式
oList[index].className = 'select';
oDivList[index].className = 'select';
}
// 给每一个li,绑定点击事件，点击的时候执行change方法，把当前点击li的索引传递进来，实现页卡的切换。
for (var i = 0; i < oList.length; i++) {
oList[i].onclick = (function (i) {
return function () {
change(i);
}
})(i);
}
</script>
3、使用ES6的let
<script>
// 不管点击哪一个li，首先让所有的li(DIV)都移除select, 再让当前点击的有select样式类
var tabBox = document.getElementById('tabBox'),
oList = tabBox.getElementsByTagName('li'),
oDivList = tabBox.getElementsByTagName('div');
// 创建一个函数实现页卡切换的功能
function change(index) {
// index: 形参，实现方法的时候我们不知道用户点击的是哪一个li,
// 设定一个入口，当用户点击需要页卡切换的时候，只要执行change方法，
// 并把点击这个li的索引传递给我们，我们就可以在oList集合中通过索引获取
// 到当前点击的这个li对象
// 让所有的li和DIV移除select样式类
for (var i = 0; i < oList.length; i++) {
oList[i].className = '';
oDivList[i].className = '';
}
// 让当前点击的这个li有选中的样式
oList[index].className = 'select';
oDivList[index].className = 'select';
}
// 给每一个li,绑定点击事件，点击的时候执行change方法，把当前点击li的索引传递进来，实现页卡的切换。
for (let i = 0; i < oList.length; i++) {
oList[i].onclick = function () {
change(i);
}
}
</script>
9738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
