函数function();
1.函数定义：只是告诉系统有这个函数，不会实际执行；
2.函数调用：真正执行函数里面的代码；
//函数定义
function foo(){
alert('abc');
}//函数调用
foo()；if判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 40px;
background: red;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="">点击</div>
<div style="display: none;" id="box">112</div>
<p>11111</p>
</body>
<script type="text/javascript">
var oDivs=document.querySelectorAll('div');
oDivs[0].οnclick=function(){
if(oDivs[1].style.display=='block'){
oDivs[1].style.display='none';
}else{
oDivs[1].style.display='block';
}
}
</script>
</html>为a链接添加js
<a href="javascript:;"></a>
className的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 300px;
height: 300px;
border: 1px solid black;
}
.box{
background: red;
}
input{
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<input type="button" name="" id="" value="背景变红"/>
<div id="a" class="a">
</div>
</body>
<script type="text/javascript">
var div=document.getElementById('a');
var btn=document.querySelector('input');
btn.οnclick=function(){
div.className='box';
}
</script>
</html>js操作的样式是放在行间的；优先级在id之前；
提取行间事件
如果js写在head里面，就要加window.onload表示页面加载完才执行js；
行为/样式/结构分离
不要在行内加这些东西；
获取一组元素
getElementsByTagName();
循环while
while（条件成立）{
执行语句；
}
循环for
for（var i=0; 条件；i++）{
执行语句;
}
index自定义属性
浏览器不支持，因为它不是标准的，但可以用js引入；
简单日历innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
.calendar{
width: 240px;
height: 320px;
margin: 200px auto;
background: silver;
overflow: hidden;
}
ul{
width: 168px;
height: 216px;
margin: 0 auto;
margin-top: 20px;
}
ul li{
width: 44px;
height: 42px;
background: sandybrown;
margin: 5px;
line-height: 21px;
text-align: center;
float: left;
border: 1px solid black;
cursor: pointer;
}
.text{
width: 166px;
height: 60px;
border: 1px solid wheat;
margin: 0 auto;
margin-top: 5px;
background: white;
}
.active{
background: white;
}
</style>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active">
<h2>1</h2>
<p>1月</p>
</li>
<li>
<h2>2</h2>
<p>2月</p>
</li>
<li>
<h2>3</h2>
<p>3月</p>
</li>
<li>
<h2>4</h2>
<p>4月</p>
</li>
<li>
<h2>5</h2>
<p>5月</p>
</li>
<li>
<h2>6</h2>
<p>6月</p>
</li>
<li>
<h2>7</h2>
<p>7月</p>
</li>
<li>
<h2>8</h2>
<p>8月</p>
</li>
<li>
<h2>9</h2>
<p>9月</p>
</li>
<li>
<h2>10</h2>
<p>10月</p>
</li>
<li>
<h2>11</h2>
<p>11月</p>
</li>
<li>
<h2>12</h2>
<p>12月</p>
</li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>快过年了，大家快回家吧！</p>
</div>
</div>
</body>
<script type="text/javascript">
(function(){
var arry=['快过年了，大家快回家吧！','2月龙泰用它','3月大家上学去','4月我们要干嘛','5月我们要干嘛','6月龙泰用它','7月大家上学去','8月我们要干嘛','9月我们要干嘛','10月龙泰用它','11月大家上学去','12月我们要干嘛'];
var tab=document.getElementById('tab');
//console.log(tab);
var lis=tab.getElementsByTagName('li');
var text=tab.getElementsByTagName('div')[0];
//console.log(text);
for(var i=0; i<lis.length;i++){
lis[i].index=i;
lis[i].οnmοuseοver=function(){
for(var i=0; i<lis.length;i++){
lis[i].className='';
}
this.className='active';
text.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arry[this.index]+'</p>';
}
}
})();
</script>
</html>
