1.选项卡的实现
2.匿名函数
无名字的函数
属性id.function(){}
3.html文件加载问题
在写js的代码,如果js代码中需要先加载html文件之后才能获取到值得话,必须把js代码写在指定标签获取值得后面.否则报错或无法运行.由于js代码嵌入在HTML标签中,导致阅读性差,以及一些其他问题,因此可以使用window.onload来优先加载HTML文件.
4.样式优先级
标签<class<ID<行间(最高优先级)
特别注意:
在获取以及定义样式的过程中都采用统一样式,由于优先级问题,会导致一些问题,同时也没有提示.例如:在写简易日历的过程中,所有的代码都写完了,但是就是鼠标移入日期框中,颜色无法改变,琢磨了好久,才发现是我设置本身的样式是id,事件后设置的样式为class,由于优先级问题,一直显示的是id的样式.
5.className
css: .active{属性1;属性2;属性3…}
js: this.className=’ ';
问题:为什么使用className而不能使用class?
在js中有class关键字,由于名字冲突,所以在js中使用className.
6.循环
循环组成结构:初始化 条件 语句 自增
主要使用while,for循环
7.innerHTML
获取txt用户输入的文字,以及写入文字
最后实现简易日历
核心实现:
1.鼠标移入更改背景颜色
2.鼠标移入更改显示文本-innerHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易日历实现版本</title>
<style>
*{
margin: 0;
padding: 0;
}
#tab{
width: 300px;
height: 450px;
margin: 10px auto;
background-color: #ECE8EA;
}
.calender {
width: 270px;
height: 350px;
margin: 0 auto;
/* border: 2px red solid; */
}
div li {
width:60px;
height: 55px;
color: #E06488;
list-style: none; /* 设置列表样式*/
font: 13px "microsoft yahei";
line-height: 1.5;
text-align:center;
margin:13px;
float: left;
background-color: #434243;
border: 2px #8F8E8F solid;
}
.active{
background-color: #FFF;
}
.text{
clear: none;
width: 250px;
height: 80px;
margin: 0 auto;
background-color: #F2F1F2;
/* border: 1px red solid; */
}
.text h3{
color: #797779;
padding: 5px 0 0 10px;
}
.text p{
color: #797779;
font: 13px "microsoft yahei";
padding: 5px 0 0 10px;
}
</style>
<script>
window.onload=function()
{
//使用数组放活动信息
var arr=[
'1111',
'232222',
'232424',
'1111',
'232dfgs222',
'232424',
'1111',
'23sdfgsdf2222',
'232424',
'detger',
'23dfgs32424',
]
var oDiv=document.getElementById('tab');
//实现:鼠标移入标签改变颜色
//1.使用数组封装所有li标签
var aLi=oDiv.getElementsByTagName('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
//2.获取数组中所有li标签的单个值
for(var i=0;i<aLi.length;i++)
{
//给每一个li添加一个序号
//可以根据这个序号识别鼠标移入的日期来更改文字
aLi[i].index=i;
//3.给所有的li标签onmouseover添加事件
aLi[i].onmouseover=function()
{
for(var i=0; i<aLi.length;i++)
{
//4.最开始清空所有的样式
aLi[i].className='';
}
//5.添加样式
this.className='active';
//获取到标签写入对应的值
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAP</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<br />
<div class = 'txt'>
<br/>
<h2>1月活动</h2>
<p>快过年了,大家可以商量着去哪儿玩吧</p>
</div>
</div>
</body>
</html>
学习的内容总结哦!