Javascript学习笔记-Day3

发表于   |   分类于 ，   |  


Day3
我觉得写原生JS的很多效果，选项卡Tab是个非常重要的基础内容。很多其他复杂的效果其实都和选项卡的思路类似或者接近。

1.选项卡

说到选项卡，自然就要用到事件，那搞清楚this就显的非常重要了。在选项卡事件函数里面this表示你点到的元素（代表事件发生在谁的头上，this就指向谁）。
还有JS的自定义属性，比如

1
this.index=1;

JS的自定义属性存在于JS的内部，和HTML没有半毛钱的关系。
如果用一句话来概括选项卡的思路那就是“干掉所有，点亮自己”。
HTML结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.tab div{width:100px; height:100px; margin-top:10px; background:#333; display:none; border-radius: 5px; color: #fff; line-height: 100px; font-size: 3rem; text-align: center;}
.tab .active{background:yellow;}
.tab .current{display:block;}
</style>
<div class="tab">
	<input type="button" value="电影" class="active">
	<input type="button" value="综艺">
	<input type="button" value="纪录片">
	<div class="current">1</div>
	<div>2</div>
	<div>3</div>
</div>

封装tab和showTab函数来处理多个选项卡。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload=function(){
	tab('tab');
};
function tab(sClass){
	var aDiv=document.getElementsByTagName('div');
	for(var i=0;i<aDiv.length;i++){
		if(aDiv[i].className==sClass){
			showTab(aDiv[i]);
		}
	}
};
//处理tab函数
function showTab(oDiv){
	var aDiv=oDiv.getElementsByTagName('div');
	var aIpt=oDiv.getElementsByTagName('input');

	for(var i=0;i<aIpt.length;i++){
		aIpt[i].index=i;//使用自定义属性，发索引
		aIpt[i].onclick=function(){
			for(var i=0;i<aIpt.length;i++){
				aIpt[i].className='';
				aDiv[i].className='';
			}
			this.className='active';
			aDiv[this.index].className='current';
		}
	}
};

2.什么是封装？

封装就是把具有某种功能的代码块放到函数里面，重复使用。

3.innerHTML

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

4.关于循环当中i的问题

当循环结束时，循环当中的i其实已经变成了length。因为计算机的执行速度很快，循环是在一瞬间完成的。
建议不要在事件函数内直接使用i来做对象的索引，可以使用自定义属性来代替。

5.JS当中的数据类型

typeof 数据 –> 返回数据的数据类型
null –> 空对象

所有常见数据类型：

  • number（NaN）数字
  • string 字符串
  • boolean 布尔值
  • object（null） 对象
  • undefined 未定义
  • function 函数 很多人觉得函数是一种数据类型，但是也有很多人觉得函数是对象的一种。

基本数据类型：number string boolean undefined
复合数据类型：object